的div不是鄰

Question

伊夫jQuery的下一個（）選擇以下更改你點擊一前一後出現在div.my-DIV的寬度：

$(".my-div").click(function() { 
    $(this).next().css({'width':'500px'}); 
}); 

由於我的div是鄰近的，這工作得很好：

<div class="my-div">stuff</div> 
<div class="my-div">stuff</div> 
<div class="my-div">stuff</div> 

但是現在的結構發生了變化，使他們不再鄰近：

<div> 
    <div class="my-div">stuff</div> 
</div> 
<div> 
    <div> 
    <div class="my-div">stuff</div> 
    </div> 
</div> 
<div class="my-div">stuff</div> 

選擇同一班級的下一個元素最簡單的方法是什麼？ 謝謝

Answer 1

jQuery將按照它們在DOM中出現的順序返回元素。

因此，您可以緩存所有.my-div元素，使用index()^[docs]方法獲取接收事件的索引，將其增加並使用eq()^[docs]方法獲取下一個。

var divs = $(".my-div"); // cache all of them 

divs.click(function() { 
    var idx = divs.index(this); // get the index in the set of the current one 
    divs.eq(idx + 1).css({'width':'500px'}); // get the one at the next index 
}); 

這可以讓您避免做一堆不必要的DOM選擇和遍歷。

例子：http://jsfiddle.net/VrATm/1/

---

編輯：發佈錯誤的榜樣鏈接。固定。

Answer 2

您可以遍歷樹的層次結構。也就是說，你可以先跳到父母，然後到下一個，然後到孩子，像這樣：

$(this).parent().next().find(' > div').css({'width':'500px'});