我希望将具有相同类名的所有兄弟姐妹一起定位到一个容器中。
在这个 HTML 中,
<div class="pink"></div>
<div class="pink"></div>
<div class="pink"></div>
<div class="red"></div>
<div class="red"></div>
<div class="pink"></div>
我希望所有.pink
相邻的 div 都被包装在一个.pinkwrap
容器中,即使.pink
没有任何兄弟姐妹,就像最后一行一样。所有其他 div 都保持不变。
理想结果:
<div class="pinkwrap">
<div class="pink"></div>
<div class="pink"></div>
<div class="pink"></div>
</div>
<div class="red"></div>
<div class="red"></div>
<div class="pinkwrap">
<div class="pink"></div>
</div>
到目前为止,这是我在 jQuery 中尝试过的内容:
var towrap = $(".pink");
towrap.each(function(){
$(this).not(".pink + .pink").each(function(){
$(this).nextUntil(":not(.pink)").addBack().wrapAll('<div class="pinkwrap">');
});
})
这可行,但如果我只想更改towrap
变量中的选择器而不在后续行中调整它,我将如何重写.not(".pink + .pink")
并.nextUntil(":not(.pink)")
适应它?
我试过的:
var towrap = $(".pink");
towrap.each(function(){
$(this).not(towrap + towrap).each(function(){
$(this).nextUntil().not(towrap).addBack().wrapAll('<div class="pinkwrap">');
});
})
但这显然行不通。这是jsfiddle。如果我错过任何建议,我愿意接受任何建议和指向以前答案的链接!