包装从 class="foo" 到 class="bar" 的所有元素答案

【问题标题】：Wrap all elements from class="foo" up until class="bar"包装从 class="foo" 到 class="bar" 的所有元素
【发布时间】：2014-04-26 22:33:18
【问题描述】：

我有一个完整的 DOM 负载，其中包含 div，其中有类“foo”，后面的某个地方是“bar”，就像这样......

<div class="kev">...</div>
<div class="foo">...</div>
<div class="bob">...</div>
<div class="tom">...</div>
<div class="bar">...</div>
<div class="pat">...</div>
<div class="foo">
    <div class="tim">...</div>
    <div class="foo">...</div>
    <div class="jim">...</div>
    <div class="bar">...</div>
    <div class="rob">...</div>
</div>
<div class="meg">...</div>
<div class="bar">...</div>

我希望它能够包装所有以“foo”开头并以“bar”结尾的类，就像这样......

<div class="kev">...</div>
<div class="wrapper">
    <div class="foo">...</div>
    <div class="bob">...</div>
    <div class="tom">...</div>
    <div class="bar">...</div>
</div><!--end of wrapper-->
<div class="pat">...</div>
<div class="wrapper">
    <div class="foo">
        <div class="tim">...</div>
            <div class="wrapper">
                <div class="foo">...</div>
                <div class="jim">...</div>
                <div class="bar">...</div>
            </div><!--end of wrapper-->
        <div class="rob">...</div>
    </div>
    <div class="meg">...</div>
    <div class="bar">...</div>
</div><!--end of wrapper-->

注意：它们可以嵌套，如上。

非常感谢任何帮助

【问题讨论】：

发布您目前拥有的代码以及您遇到的错误。

标签： jquery css dom

【解决方案1】：

尝试以下方法：

$(".foo").each(function () {
     $(this).nextUntil(".bar + *").addBack().wrapAll("<div class='wrapper'/>");
});

【讨论】：

很好，谢谢，很有魅力。看起来很奇怪... addBack().next().addBack()
是的，这是因为 nextUntil() 不包含“.bar”，所以我需要先执行 next() 然后 addBack()。

【解决方案2】：

$.each($(".foo"), function() {
            var untilBar = $(this).nextUntil(".bar").addBack(); //Select .foo div and it's siblings until .bar
            untilBar.add(untilBar.next()).wrapAll('<div class="wrapper"></div>'); //Add .bar to the set and wrap
        });

请看这个小提琴：http://jsfiddle.net/BYxHL/

【讨论】：