jQuery select first element that has a certain class after this

Question

Here is my fiddle: http://jsfiddle.net/jamesbrighton/wxWgG/4/

HTML:

<div>
    <p class="click">Click 1</p>
    <p>This should be ignored</p>
    <p>This should be ignored</p>
    <p>This should be ignored</p>
</div>

<div>
    <p class="target">Target 1</p>
</div>
<div>
    <p class="target">Target 2</p>
</div>


<div>
    <p class="click">Click 2</p>
    <p>This should be ignored</p>
    <p>This should be ignored</p>
    <p>This should be ignored</p>
</div>

<div>
    <p class="target">Target 3</p>
</div>
<div>
    <p class="target">Target 4</p>
</div>

jQuery:

$('.click').click(function() {
   $(this).nextAll('.target').css('color','red');
});​

I need it so when you click a p.click, the next p.target turns red.

So if you click on 'Click 1' then 'Target 1' turns red. If you click on 'Click 2' then 'Target 3' turns red.

As well as .find I've tried .closest and from the jQuery documentation it seems to me like it should work. As you can see from the HTML, .target is not a child of .click, in case that makes a difference.

Answer 1

Here is another approach, although I don't know how performant .index() is in this case. This also assumes that there are never two consecutive .click elements (or phrased differently: There is always at least one .target element between two .click elements):

var $elements = $('.click, .target');

$('.click').click(function() {
   $elements.eq($elements.index(this) + 1).css('color','red');
});​

DEMO

This works because the elements are selected in the order they appear in the document.

Answer 2

Are you looking for this?

$('.click').click(function() {
    $(".target", $(this).parent().next()).css('color','red');
});

Updated Fiddle