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

Question

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

我需要它，这样当您单击 p.click 时，下一个 p.target 就会变成红色。

因此，如果您单击'Click 1'，则'Target 1' 会变成红色。如果您单击'Click 2'，则'Target 3' 将变为红色。

以及.find，我已经尝试过.closest，从jQuery文档来看，在我看来它应该可以工作。正如您从 HTML 中看到的，.target 不是 .click 的子级，以防产生影响。

Answer 1

这是另一种方法，尽管我不知道在这种情况下 .index() 的性能如何。这还假设永远不存在两个连续的 .click 元素(或者换句话说:两个 .click 之间始终至少有一个 .target 元素> 元素):

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

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

DEMO

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