jquery - 匹配类时如何使用jQuery拆分元素？

Question

我想要的是能够将 ul 拆分为两个或多个部分，只要匹配“splithere”类。然后我需要将每个部分包装在一个容器中。像这样：

<ul class="someclass">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li class="splithere">Four</li>
    <li>Five</li>
    <li>Six</li>
    <li class="splithere">Seven</li>
    <li>Eight</li>
    <li>Nine</li>
</ul>

我想以这个结束：

<ul class="someclass">
    <li class="newclass">
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
    </li>
    <li class="newclass">
        <ul>
            <li class="splithere">Four</li>
            <li>Five</li>
            <li>Six</li>
        </ul>
    </li>
    <li class="newclass">
        <ul>
            <li class="splithere">Seven</li>
            <li>Eight</li>
            <li>Nine</li>
        </ul>
    </li>
</ul>

我希望有一个人可以帮助我...

Answer 1

你可以这样做：

$(".someclass .splithere, .someclass li:first").each(function() {
    var li = $('<li class="newclass"></li>').insertBefore(this);
    var ul = $("<ul>").appendTo(li);
    $(this).nextUntil(".splithere")
        .add(this)
        .appendTo(ul);
});​

工作示例：http: //jsfiddle.net/jfriend00/TTRhc/

---

再简化一点：

$(".someclass .splithere, .someclass li:first").each(function() {
    var li = $('<li class="newclass"><ul></ul></li>').insertBefore(this);
    $(this).nextUntil(".splithere").add(this).appendTo(li.find("ul"));
});​

工作示例：http: //jsfiddle.net/jfriend00/bC5J9/

Answer 2

你想要这样的东西：

 $('.splithere').each(function(index){
       var masterIndex=$('ul.someclass li').index(this),
       listObj=$('ul.someclass li:eq(' + masterIndex + ')).add($('ul.someclass li:eq(' + masterIndex +')').nextUntil($('.splithere').eq(index+1)),
       wrapper=$('<li class="newclass"><ul>' + listObj + </ul></li>');
       $('ul.someclass li:eq(' + masterIndex + ')').add($('ul.someclass li:eq(' + masterIndex + ')').nextUntil($('.splithere').eq(index+1)).replaceWith(wrapper);
 })

它的作用是： 1. 获取主索引 - 即列表中此列表项的索引 2. 创建一个对象 (listObj)，其中包括此 splithere 和列表项，直到此处的下一次拆分，并用 ul 包装它们和 li 根据您想要的结果 3. 用新的 dom 结构替换原始列表项及其同级

我还没有测试过，但这应该可以。