jquery - JQuery：使用最接近和查找函数来显示隐藏的 div

Question

最初，所有智能建议 div 都是隐藏的。我正在尝试显示属于用户单击的最近的“产品名称容器”div 的“智能建议”div。我尝试使用最接近（）和查找（），但它不起作用，我不确定它为什么不起作用。

标记

              for($i=0; $i < 20; $i++){
                    echo '
                    <div class="invoice-line">
                        <div class="index">'.($i+1).'</div>
                        <div class="prod-id"><input type="text" id="prod-id"></div>
                        <div class="prod-name-container">
                           <input onKeyPress="search(this.value)" type="text" class="prod-name"/>
                           <div class="smart-suggestions">
                                <!-- RESULT SUGGESTIONS WILL POPULATE HERE -->
                           </div>
                        </div>
                        <div class="qty">1</div>
                    </div>';
                }

jQuery

   $('.smart-suggestions').hide();
   $('.prod-name').focus(function() {
        $last = $(this);
        $('.invoice-line').closest(".prod-name-container").find('.smart-suggestions').show();
    });

Answer 1

您可以使用该next方法。

$(function(){ // when the DOM is ready
    $('.smart-suggestions').hide();
    $('.prod-name').focus(function() {
        var $this = $(this);
        $this.next('.smart-suggestions').show();
    });

    //  or: 
    //  $('.prod-name').on('focus blur, 'function(e) {
    //       var $this = $(this);
    //       $this.next('.smart-suggestions').toggle(e.type === 'focus');
    //  })

})

Answer 2

只需这样做 - .smart-suggestions 是 .prod-name 的兄弟

$('.smart-suggestions').hide();
$('.prod-name').focus(function() {
    $last = $(this);
    $last.next('.smart-suggestions').show();
});

Answer 3

$('.smart-suggestions').hide();
$('.prod-name').focus(function() {
    $last = $(this);
    $('.invoice-line', $(this)).closest(".prod-name-container").find('.smart-suggestions').show();
});

虽然如果你想让它点击，我会把它改成$('.prod-name').focus.click