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

演示

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

参考

。下一个（）

。每个

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

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

$(this)指当前元素。

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

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

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

Answer 2

这样的事情可能就足够了（如果我认为你的主要问题是正确的）：

$('.insert').each(function() {
    $this = $(this);
    $this.parent().prepend($this);
});

小提琴：http: //jsfiddle.net/HJCps/1/