javascript - 在列表中插入多个div

Question

我有一个列表，需要为列表项插入div，如果使用简单的.InsertBefore，将无限增加元素

如何插入div而不重复其他项目？

示例:jsfiddle.net/HJCps

HTML代码

<div id="sorter">

    <div class="item item-1">
        <div class="text">Item 1</div>
        <div class="insert">Insert Text 1</div>
    </div>

    <div class="item item-2">
        <div class="text">Item 2</div>
        <div class="insert">Insert Text 2</div>
    </div>

    <div class="item item-3">
        <div class="text">Item 3</div>
        <div class="insert">Insert Text 3</div>
    </div>

</div>

JS代码

$('.insert').insertBefore('.text');

Answer 1

DEMO

$('.item .text').each(function(){
    $(this).next('.insert').insertBefore(this);
});

引用文献

.next()

.each

$('.item .text')将找到类 text 的所有元素包含在类 item 中

$('.item .text').each将逐一循环遍历每个匹配的元素。

$(this)引用当前元素。

$(this).next('.insert')将找到类 insert 的下一个元素

$(this).next('.insert').insertBefore(this);将在当前元素之前插入匹配的 类 insert 的下一个元素

您的代码$('.insert').insertBefore('.text');将在类 insert 的所有元素之前插入类为 .text 的所有元素