Question

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

如何在不复制其他项目的情况下插入div？

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

的所有元素之前

Answer 2

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

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

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

在列表中插入多个div

2 个答案: