如何在第一个 h3 之后但下一个 h3 之前的所有 h2 元素之前添加类“one”,并在第二个 h3 元素之后但不是最后一个 h2 的所有 h2 元素之前添加类“two”元素。
假设以下 HTML:
<div class="container">
<h2></h2>
<h2></h2>
<h2></h2>
<h3></h3>
<h2></h2>
<br></br>
<h2></h2>
<p></p>
<h2></h2>
<h3></h3>
<h2></h2>
<p></p>
<h2></h2>
<h2></h2>
</div>
如何使用这样的东西(带或不带.nextUntil)
$( ".container .h3:first" )
.nextUntil( ".h3" )
.after($('<div class="one"></div>'));
$( ".container .h3:nth-of-type(2)" )
.nextUntil( ".h2:eq(-2)" )
.after($('<div class="two"></div>'));
目标:
<div class="container">
<h2></h2>
<h2></h2>
<h2></h2>
<h3></h3>
<div class="one"></div>
<h2></h2>
<br></br>
<div class="one"></div>
<h2></h2>
<p></p>
<div class="one"></div>
<h2></h2>
<h3></h3>
<div class="two"></div>
<h2></h2>
<div class="two"></div>
<h2></h2>
<p></p>
<div class="two"></div>
<h2></h2>
<h2></h2>
</div>
最佳答案
您的代码即将完成。您只需将 h2
选择器添加到 nextUntil
方法即可选择 h2
元素。另外,您可能想使用 h2:eq(-1)
和 before
:
$('.container h3:first').nextUntil('h3', 'h2').before('<div class="one"></div>');
$('.container h3:nth-of-type(2)').nextUntil('h2:eq(-1)', 'h2').before('<div class="two"></div>');
演示:http://jsfiddle.net/t1d3eeat/
关于javascript - 如何使用 .nextUntil 将两个不同的类添加到 <h2> 元素列表中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27144940/