JQuery：使用最近的和查找函數來顯示隱藏的div

最初所有的智能建議div都是隱藏的。我試圖展示屬於用戶點擊的最近的'prod-name-container'div的'smart-suggestions'div。我嘗試使用最接近（）和find（），但它沒有工作，我不知道爲什麼它不工作。JQuery：使用最近的和查找函數來顯示隱藏的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(); 
    });

來源

2012-12-05 AnchovyLegend

只要做到這一點 - .smart-建議是.prod名的兄弟姐妹

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

來源

2012-12-05 15:26:56

完美！正是我需要的。非常簡潔，以及。謝謝！ – AnchovyLegend

可以使用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'); 
    // }) 

})

來源

2012-12-05 15:26:17 undefined

感謝您的回覆。這完美的作品！ – AnchovyLegend

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

但如果你想擁有它是上點擊，我會改變$('.prod-name').focus來。點擊

來源

2012-12-05 15:26:33 Magicmarkker

JQuery：使用最近的和查找函數來顯示隱藏的div

回答

相關問題