jQuery selectors - traverse dom in more robust way?
<p>When you click the trigger, the code below will turn the 2nd div.four red and not the first one. </p>

<p>I understand why this is happening but can I solve it without something like .nextAll('.parent').child() ? My html may change eg the first div.four might end up in 2 div.parents, so id like a solution that would still work. </p>

<p>Is there a more robust way of traversing the dom eg finding the next div with a certain class regardless of how many levels down it is? </p>

<pre><code> $(document).ready(function(){
     $('.trigger').click(function(){
        $(this).nextAll('.four').css('background-color','red');         
     });
 });​

&lt;div class="trigger"&gt;trigger&lt;/div&gt;
&lt;div class="one"&gt;one&lt;/div&gt;
&lt;div class="two"&gt;two&lt;/div&gt;
&lt;div class="three"&gt;three&lt;/div&gt;
&lt;div class="parent"&gt;
   &lt;div class="four"&gt;four&lt;/div&gt;    
&lt;/div&gt;
&lt;div class="four"&gt;four&lt;/div&gt;    ​
</code></pre>

<p><a href="http://jsfiddle.net/g9heg/1/" rel="nofollow">http://jsfiddle.net/g9heg/1/</a> </p>

<p>UPDATE</p>

<p>I should have specified but I need to have multiple triggers and targets in the same page. So for this fiddle, 'trigger 1' should target 'four' and 'trigger 2' should target 'Seven'. Thanks </p>

<p><a href="http://jsfiddle.net/g9heg/5/" rel="nofollow">http://jsfiddle.net/g9heg/5/</a></p>
