0

我希望将具有相同类名的所有兄弟姐妹一起定位到一个容器中。

在这个 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。如果我错过任何建议,我愿意接受任何建议和指向以前答案的链接!

4

0 回答 0