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