jQuery 添加结束标记，然后在使用 .before() 时重新打开

Question

我有这个 HTML：

    <ul>
        <div>
            <li>a</li>
            <li>b</li>
            <li class="break">c</li>
            <li>d</li>
            <li>f</li>
        </div>
    </ul>

我想要的是 class="break" 我希望父 div 关闭并打开一个新的，所以我最终得到这个：

    <ul>
        <div>
            <li>a</li>
            <li>b</li>
        </div>
        <div>
            <li>c</li>
            <li>d</li>
            <li>f</li>
        </div>
    </ul>

现在我已经尝试过了：

$(".break").before("</div><div>");

但是 jQuery 并没有像我期望的那样运行，而是重写了我输入的内容并放置了一个空的 div。像这样：

    <ul>
        <div>
            <li>a</li>
            <li>b</li>
            <div></div>
            <li class="break">c</li>
            <li>d</li>
            <li>f</li>
        </div>
    </ul>

那么我怎样才能达到我所追求的目标呢？

Answer 1

假设您有以下标记：

<ul>
    <li>a</li>
    <li>b</li>
    <li class="break">c</li>
    <li>d</li>
    <li>f</li>
</ul>

而你想把它变成：

<ul>
    <li>a</li>
    <li>b</li>
</ul>
<ul>
    <li class="break">c</li>
    <li>d</li>
    <li>f</li>
</ul>

您可以使用nextAll() 和andSelf() 来获取要移动的元素，然后创建一个新的<ul> 并使用append() 重新定位元素：

var boundary = $("li.break");
$("<ul>").insertAfter(boundary.parent()).append(boundary.nextAll().andSelf());

你可以在this fiddle看到结果。

Answer 2

优秀的解决方案

在我的情况下好吧..可以说我有多个 li.break

所以以下解决方案帮助了我

 $("li.break").each(function(){
     var boundary = $(this);
     $("<ul>").insertAfter(boundary.parent()).append(boundary.nextAll().andSelf());
 });    

检查这个小提琴http://jsfiddle.net/stLW4/127/ 以获得更多理解