從跨度/跨度div遍歷DOM

Question

我將點擊事件添加到div內的跨度。這個事件的目標將變得可見，是第一個div，在div內，兩個div。我如何遍歷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 
    }); 
});​