jQuery next() selector when divs are not neighboring -

ive been using following change width of div.my-div appears after 1 you've clicked:

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

as divs neighboring, worked fine:

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

however structure has changed no longer neighboring:

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

whats simplest way select next element of same class?

jquery return elements in order of appearance in dom.

as such, cache .my-div elements, use index()^[docs] method index of 1 received event, increment , use eq()^[docs] method next one.

var divs = $(".my-div");  // cache of them  divs.click(function () {     var idx = divs.index( );  // index in set of current 1     divs.eq( idx + 1 ).css({'width':'500px'}); // 1 @ next index }); 

this saves doing bunch of unnecessary dom selection , traversing.

example: http://jsfiddle.net/vratm/1/

---

edit: posted wrong example link. fixed.