jQuery选择此后具有某个类的第一个元素

这是我的小提琴：
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');
});​

我需要它,所以当你点击一个p.click时,下一个p.target变成红色.

因此,如果您单击“单击1”,则“目标1”将变为红色.如果单击“单击2”,则“目标3”变为红色.

除了.find我尝试过.closest,从jQuery文档中我觉得它应该可行.正如你从HTML中看到的那样,.target不是.click的孩子,以防万一.

解决方法

这是另一种方法,虽然我不知道在这种情况下性能如何.index().这也假设永远不会有两个连续的.click元素(或者表达方式不同：两个.click元素之间总是至少有一个.target元素)：

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

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

DEMO

这是有效的,因为元素按它们在文档中出现的顺序选择.