选择“核心转发下一个子元素”

select coressponding next child element

本文关键字：元素 下一个 转发 核心 选择      更新时间：2023-09-26

我有以下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

使用 jQuery .next() 选择器：

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

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

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

或 

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

我不确定你在尝试什么。 如果你想要下一个.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 */ 
}

工作小提琴（悬停时）

相关文章：