jQuery的选择，这

这里后有一定的类第一个元素是我的小提琴： http://jsfiddle.net/jamesbrighton/wxWgG/4/jQuery的选择，这

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的孩子，以防万一。

来源

2012-03-22 Evans

nextAll适用于兄弟姐妹，不在父母之外。所以你需要告诉我们你想如何穿越......如果你想要父母兄弟姐妹的孩子，那么这是可能的。 – 2012-03-22 16:05:38

你的例子不是很好，它只包含一个“Click”元素。 “点击”和“目标”如何关联？它们是否都是有序的，这意味着如果点击第二个“点击”，第二个“目标”是否被突出显示等？ *编辑：*显然你链接到错误的小提琴。这就是为什么你总是应该包含代码的原因。 – 2012-03-22 16:08:03

我没有看到“点击1”或“点击2”。你的代码是最新的吗？ – 2012-03-22 16:09:27

这里是另一种方法，虽然我不知道在这种情况下如何执行.index()。这还假定从未有两个连续.click元素（或表述有所不同：总有至少一个.target 2个.click元素之间的元素）：

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

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

DEMO

这工作，因为该元素的选择它们在文档中出现的顺序。

来源

2012-03-22 16:17:26

聪明而好看。 – 2012-03-22 16:42:12

您的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工作的兄弟姐妹。在你的情况，它会寻找所有＃点击的兄弟与.target类。

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

DEMO

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

来源

2012-03-22 16:08:30

的2个div的'.target'，只有下一个'.target'应该变为红色。这使得所有'.target'变成红色 – Ropstah 2012-03-22 16:10:38

这可以工作，但是如果我在包含p.click的div上添加另一个div，它会中断。我想我理解为什么会发生这种情况，但是有没有办法找到某个类的下一个元素，而不管它是如何嵌套的？ – Evans 2012-03-22 16:37:17

你可以试试这个。

$('#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]; 
    } 
});

来源

2012-03-22 16:09:46 Ropstah

此选择你需要在你的HTML代码的元素：

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

来源

2012-03-22 16:10:43 gpasci

你在找这个？基于更新后的HTML

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

Updated Fiddle

来源

2012-03-22 16:11:59

这可以工作，但如果我在包含p.click的div上添加另一个div，它会中断。我想我理解为什么会发生这种情况，但是有没有办法找到某个类的下一个元素，而不管它是如何嵌套的？ – Evans 2012-03-22 16:35:59

您的HTML必须具有固定的结构，或者您必须非常清楚地定义要涵盖哪些情况。 jQuery无法读取头脑:)只要您可以定义布局，就会有一种方法，但定义必须一致而精确。 – 2012-03-22 16:39:16

，我创造了这个小提琴：http://jsfiddle.net/wxWgG/22/

...并使用这个jQuery

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

这是你想要的吗？

来源

2012-03-22 16:15:48 SpaceBison

这可以工作，但如果我在包含p.click的div上添加另一个div，则会中断。我想我理解为什么会发生这种情况，但是有没有办法找到某个类的下一个元素，而不管它是如何嵌套的？ – Evans 2012-03-22 16:36:32

你的OP中的HTML应该声明你想要使用的HTML！看Felix Kling的答案 - 看起来这将是结构不可知的。否则，更新OP并等待另一筏更新的答案.... – SpaceBison 2012-03-22 16:39:09

jQuery的选择，这

回答

相关问题