Question

我有这个HTML：

<div class="parent-div" id="uniqueidnumber">
<div class="col-xs-6">
<p>some text</p>
<p>some text</p>
<ul>
<li>some text</li>
<li>some text</li>
</ul>
<!-- here opened div should end and new with same class opened -->
<p>some text</p>
<ul>
<li>some text</li>
<li>some text</li>
</ul>
<!-- here div should end -->
<p>some text</p>
</div>

有多个parent-div div，就像我在评论中说的那样，我需要在第一个<ul>之后关闭打开的div，然后打开同一个类的新div，然后在最后<ul>关闭该div之后。使用此代码，我在第一个父div中的第一个<div class="col-xs-6"></div>下获得<ul>的n个数字（对于每个parent-div）。

$('.parent-div').each(function() {
    $('.parent-div ul').first().after('</div><div class="col-xs-6">');
    $('.parent-div ul').last().after('</div>');
})

如何在第一个和最后一个<ul>之后在每个parent-div中插入所需的代码？

Answer 1

这是一个有趣的问题...但我相信这可以做你想要的。

JSFiddle

$(".parent-div").each(function () {
    var $div1 = $(this).find(".col-xs-6");
    var $div2 = $("<div class='col-xs-6'></div>");
    var $lastUl = $div1.children("ul").last();
    var $section = $div1.children("ul").first().nextUntil($lastUl);
    var $after = $lastUl.nextAll();
    $div2.append($section);
    $div2.append($lastUl);
    $div2.insertAfter($div1);
    $after.insertAfter($div2);
});

如果你想在每个第一级ul进行拆分，你可以使用上面这样的递归：

JSFiddle

$(".parent-div").each(function () {
    var $div1 = $(this).find(".col-xs-6");
    splitItUp($div1);
});
function splitItUp($div1) {
    var $div2 = $("<div class='col-xs-6'></div>");
    var $lastUl = $div1.children("ul").last();
    var $section = $div1.children("ul").first().nextUntil($lastUl);
    var $after = $lastUl.nextAll();
    $div2.append($section);
    $div2.append($lastUl);
    $div2.insertAfter($div1);
    $after.insertAfter($div2);
    if($div2.children("ul").length > 1) {
        splitItUp($div2);
    }
}

Answer 2

那么，

假设您想要在ul之后将所有元素移到new column，这应该对您有用：

$('.parent-div').each(function() {
    var newDiv = $('<div></div>', {'class': 'col-xs-6'});
    var found = false;
    $('div.col-xs-6', this).children().each(function(){
        if(!found && !$(this).is('ul')) {
            return;
        } else if(!found) {
            found = true;
        } else {
            $(this).clone().appendTo(newDiv);
            $(this).remove();
        }
    });
    newDiv.appendTo(this);
})

希望它有所帮助。

在多个div中的第一个和最后一个ul之后添加元素

2 个答案: