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/以获得更多理解

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

2 个答案: