javascript - 选择对应的下一个子元素

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

工作小提琴

例如，如果你想要第二个，.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 */ 
}

工作小提琴（悬停时）