jQuery: 用灵活的选择器包裹相同 class 的兄弟 div

Question

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

在这个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">');
    });
})

但这显然行不通。 Here's jsfiddle。我愿意接受任何建议和指向以前答案的链接，以防我遗漏任何内容！

Answer 1

我想通了。
解决方案是将 div 声明为字符串，而不是选择器：var towrap = ".pink";

var towrap = ".pink";

$(towrap).each(function(){
    $(this).not(towrap + "+" + towrap).each(function(){
        $(this).nextUntil(":not(" + towrap + ")").addBack().wrapAll('<div class="pinkwrap">');
    });
})

new jsfiddle

jQuery: 用灵活的选择器包裹相同 class 的兄弟 div

jQuery: Wrap sibling divs of the same class with flexible selector

jquery

nextuntil