Question

我有以下html

<div id="test">
<p class="one"></p> <---first one----->
<p class="two"></p>
<p class="three"></p>
<p class="four"></p>
<p class="one"></p> <---second one---->
<p class="two"></p>
<p class="three"></p>
<p class="four"></p>
<p class="one"></p> <--- third one----->
<p class="two"></p>
<p class="three"></p>
<p class="four"></p>
</div>

好的，现在我开始.one class然后我想选择下一个.one class，如果我是第二个，那么我想再次选择.one class这个。我认为:next-child没有.one:next-child这样的事情，所以我该怎么做？

更新

@chopper答案没问题！但如果它找不到下一个，那么它应该先选择one

Answer 1

使用jQuery .next()选择器：

var secondOne = firstOne.next('.one');

编辑：@KevinB是对的，正确答案是

var secondOne = firstOne.nextAll('.one:first');

或

var secondOne = firstOne.nextAll('.one').first();

Answer 2

我不确定你在尝试什么。如果你想要下一个.one，你可以使用兄弟选择器。

p.one ~ p.one ~ p.one{
    background-color: green;
}

Working fiddle

例如，如果您想要第二个.one，那么请执行以下操作：

p.one ~ p.one {
     /* apply styles */   /* selects all sibling elements */
}

p.one ~ p.one ~ p.one{           /* overriding css  styles */
     /* apply default styles */  /* selects all other sibling elements leaving the second element */ 
}

Working fiddle（悬停）

选择相应的下一个子元素

2 个答案: