Jquery：DIV内の要素を見つける

Question

私は以下を持っています（基本的にschedule_boxはラッパーであり、必要に応じてclient_schedule個のdivがあります）。私は、デフォルトでは非表示.detailsを持っている、と私は下向きの矢印をクリックしたときにdetailsを表示する：

<div class="schedule_box"> 
    <div class="client_schedule"> 
     <span class="edit"> 
      <img src="images/manage_companies/down-icon.png" class="down"> 
     </span> 
     <span class="details"> 
      test 
     </span> 
    </div> 
    <div class="client_schedule"> 
     <span class="edit"> 
      <img src="images/manage_companies/down-icon.png" class="down"> 
     </span> 
     <span class="details"> 
      test 
     </span> 
    </div> 
</div> 

jQueryの（私は全体の接触ボックスを使用する場合、それが動作する）：

$('.schedule_box').find('.details').hide().end().find('.down').click(function() { 
} 

私は .downを使用しようとすると、それは問題を抱えています

しかし、.detailsを見つける：

$('.schedule_box').find('.details').hide().end().find('.down').click(function() { 
    var details = $(this).find('.details'); 
    if (details.is(':visible')) { 
     details.slideUp(); 
    } else { 
     details.slideDown(); 
    } 
}); 

明らかにそれはその子孫として ".details" div要素を持っていません -

var details = $(this).parent('.client_schedule').find('.details'); 

クリックイベントハンドラ内thisは画像をクリックされているためです：あなたは、適切な".client_schedule"親のdivのコンテキストでfindを使用する必要が

Answer 1

は、あなたが常に.client_schedule要素に直接ハンドラを割り当て、クリックされたものをテストすることによって、小さなイベントの委任を行うことができ

var details = $(this).parents('.client_schedule').find('.details'); 

Answer 2

。一方、その親の".client_schedule" divがあります。あなたが.detailを.client_scheduleまでのすべての道を行くと見つけることができる、また

var details = $(this).parent().next(); 

：

Answer 3

あなたは.downの親の次の兄弟を見つけたい

var details = $(this).closest(".client_schedule").find(".detail"); 

注：この方法で.closest()を使用し、.parent()または.parents()ではなく、使用したいと考えています。 .parent()は直接の親だけを取得し、.parents()はセレクタと一致するすべての祖先を取得するため、.ancestors()という名前にする必要があります。 .closest()は、セレクタに一致する最初の祖先を提供します。

Answer 4

を試してみてください。

例：http://jsfiddle.net/REJ6Z/

$('.client_schedule').click(function(e) { 

    if($(e.target).is('img.down')) { 
     $(this).find('.details').slideToggle(); 
    } 

}).find('.details').hide(); 

$('.client_schedule').click(function(e) { 

    if($(e.target).is('img.down')) { 
     var details = $(this).find('.details'); 
     if (details.is(':visible')) { 
      details.slideUp(); 
     } else { 
      details.slideDown(); 
     } 
    } 

}).find('.details').hide(); 

---

はまた、少しのコードを減らすためにslideToggle()^[docs]メソッドを使用することができます