在使用jQuery的某个元素之后使用div包装所有元素
问题描述:
我试图包装出现在特定元素之后的所有Div。我如何使用jQuery来做到这一点?在使用jQuery的某个元素之后使用div包装所有元素
目前代码
<div class="a"></div>
<div class="b"></div>
<div class="b"></div>
<div class="a"></div>
<div class="b"></div>
<div class="b"></div>
<div class="a"></div>
<div class="b"></div>
<div class="b"></div>
所需的输出
<div class="a"></div>
<div class="wrapper">
<div class="b"></div>
<div class="b"></div>
</div>
<div class="a"></div>
<div class="wrapper">
<div class="b"></div>
<div class="b"></div>
</div>
<div class="a"></div>
<div class="wrapper">
<div class="b"></div>
<div class="b"></div>
</div>
答
你可以为每个.a
创建包装元素中,添加的所有元素,直到下一个.a
元素,然后添加到DOM。
$('.a').each(function() {
var wrap = $('<div class="wrapper"></div>');
$(this).nextUntil('.a').appendTo(wrap);
$(this).after(wrap);
})
.wrapper {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">A</div>
<div class="b">B</div>
<div class="b">B</div>
<div class="a">A</div>
<div class="b">B</div>
<div class="b">B</div>
<div class="a">A</div>
<div class="b">B</div>
<div class="b">B</div>
答
如果总有2 .b
,你可以使用下面的代码:
$('.a').each(function() {
$(this).next('.b').next('.b').andSelf().wrapAll('<div class="wrapper"/>');
});
.wrapper {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">A</div>
<div class="b">B</div>
<div class="b">B</div>
<div class="a">A</div>
<div class="b">B</div>
<div class="b">B</div>
<div class="a">A</div>
<div class="b">B</div>
<div class="b">B</div>
我会想你已经downvote,因为你没” t显示你试图产生的任何代码。正如其他人会说的。我们不是在这里为你编码,而是告诉你你的错误。 – ssbb