jQuery添加结束标记，然后在使用.before（）时重新打开。 [英] jQuery add closing tag and then reopen when using .before()

问题描述

我有这个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> 
  

现在我试过了：

< 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> 
  

那么我该如何实现我所追求的目标？

 < ul> =h2_lin>解决方案


< 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> 
  

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

  var boundary = $（li.break）; 
 $（< ul>）。insertAfter（boundary.parent（））。append（boundary.nextAll（）。andSelf（））; 
  

您可以在这个小提琴。

I have this HTML:

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

What I want is where class="break" I want the parent div closed and a new one opened so I end up with this:

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

Now I've tried this:

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

but jQuery doesn't act as I'd expect and instead rewrites what I have entered and puts an empty div instead. Like so:

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

So how can I achieve what I am after?

解决方案

Assuming you have the following markup:

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

And you want to transform it into:

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

You can use nextAll() with andSelf() to get the elements you want to move, then create a new <ul> and use append() to relocate the elements:

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

You can see the results in this fiddle.

这篇关于jQuery添加结束标记，然后在使用.before（）时重新打开。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！