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

Question

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

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

所以,如果你点击'Click 1'然后'Target 1'变成红色.如果单击'Click 2'则'Target 3'变为红色.

除了.find我已经尝试过.closest并从jQuery文档中,我认为它应该工作.正如您从HTML中看到的,如果有所作为, .target则不是孩子.click.

Answer 1

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

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

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

DEMO

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

Answer 2

你在找这个吗？

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

更新小提琴