Question

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

<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结构替换原始列表项及其兄弟项目

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

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

2 个答案: