包装元素内的所有元素，直到出现特定标签

Question

我想动态地将一个元素的所有子元素包装在一个新元素中。 我查看了jQuery wrap（）函数，但是它没有达到预期的效果，因为它需要一个元素并用一些新元素包装它，而我想将所有子元素分组到一个新元素中。

/*Sample code*/
    <div>
        <ul>
            <li>
                /* All <li> children before <UL> tag, need to be wrapped dynamically within a <span> */
                <span class="doSomting"></span>
                <a href="#">Click Me</a>

                <ul></ul>
            </li>
        </ul>

    /*Expected <li> element*/
    <li>
        <span>
            <span class="doSomting"></span>
            <a href="#">Click Me</a>
        </span>  
        <ul></ul>
    </li>

更新我想将所有元素分组，直到<li>内出现<UL>标记。 我已经相应地更新了代码片段。 抱歉，不清楚。

谢谢

Answer 1

您可以使用.wrapAll（）

$('li').contents().wrapAll('<span />')

注：如果您有多个li元素，那么你必须遍历每个li像

$('li').each(function(){
    $(this).contents().wrapAll('<span />')
})

演示： 小提琴

---

更新资料

$('div > ul > li').each(function () {
    $(this).children(':not(ul)').wrapAll('<span />')
})

演示： 小提琴