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"我想要 parent 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 中看到结果.