divのspan in/divからDOMをトラバースする

Question

div内のスパンにclickイベントを追加しています。目に見えるようになるこのイベントのターゲットはdiv内にある最初のdiv、2つのdivsです。それを見つけるためにDOMをどのようにトラバースできますか？

は、おそらくそれは、コードをより明確になります：

<div a> 
    <h2> 
     <span id="here">Click</span> 
    </h2> 
</div> 

<div></div> 

<div> 
    <div class="targetDiv">This is the div we need to find</div> 
    <div class="targetDiv">There are other divs with the same id, but we don't need to find those</div> 
    <div class="targetDiv">Not looking for this one </div> 
    <div class="targetDiv">Or this one either</div> 
</div> 

私は左と右の検索したと答えを見つけることができません。イベントをスパンの直後の最初のdivにのみ制限することは重要です。

ご協力いただければ幸いです。示されているように

Answer 1

をつかまえました。私はあなたがhtmlファイルに保存して自分でテストできる例を提供しました

<style> 
.targetDiv{display:none;} 
</style> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#here').click(function(){ 
$('.targetDiv').first().show(); // or whatever you want 
}); 
}); 
</script> 

<div a> 
    <h2> 
     <span id="here">Click</span> 
    </h2> 
</div> 

<div></div> 

<div> 
    <div class="targetDiv">This is the div we need to find</div> 
    <div class="targetDiv">There are other divs with the same id, but we don't need to find those</div> 
    <div class="targetDiv">Not looking for this one </div> 
    <div class="targetDiv">Or this one either</div> 
</div> 

Answer 2

、コードは次のようになります。魚の

$('span#here').on('click', function() { 
    $(this).closest('div').siblings(':contains(.targetDiv)').children().eq(0).show(); 
} 

Answer 3

Here's a sampleを私たちは、この作品

$(function() { 
    $('#here').on('click', function() { 
     var div = $(this)   //the element clicked 
      .closest('div')  //find nearest parent div 
      .nextAll(':eq(1)')  //find the second next div 
      .children(':eq(0)') //find the first child of it 
      .show();    //remove invisible cloak 
    }); 
});​