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');
});

我需要它，所以当您点击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');
});

Updated Fiddle

Answer 3

这将在您的html代码中选择您需要的元素：

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

Answer 4

根据您更新的HTML，我创建了这个小提琴：http://jsfiddle.net/wxWgG/22/

...并使用了这个jQuery

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

这就是你想要的吗？

Answer 5

你的HTML构造不便于访问特定目标。我们可以实现你想要的，但是当你以这种方式遍历时，脚本会变得复杂。相反，添加一个分组div，这将使您的脚本变得简单易行。

DEMO

<强> HTML：

<div class="group"> <!-- added grouping wrapper -->
<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>
<div class="group">
<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>
</div>

<强> JS：

$('.click').click(function() {
     $(this).closest('.group').find('.target').css('color','red');
});

.nextAll适用于兄弟姐妹。在您的情况下，它将查找所有＃click与类.target的兄弟姐妹。

您需要的是parents -> sibling -> child。

DEMO

$('#click').click(function() {   
    $(this).parent().siblings().find('.target').css('color','red');
});

Answer 6

你可以试试这个。

$('#click').click(function() {
    var go = true;

    var item = $(this).parent();

    while(go && item) {
        var target = $('.target', item)[0];

        if(target != null) {
            go = false;
            $(target).css('color', 'red');
        }

        item = $(item).next()[0];
    }
});

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

6 个答案: