Question

我有一堆带有'row'类的div，包含两个div''image'和'description'

我试图在所有情况下在'image'之前插入'description'。

我尝试了以下对我来说具有逻辑意义的代码，但结果非常出乎意料，因为你可以在小提琴中看到。

$('.row').each(function(){ //Select each row

    $('.description',this).insertBefore('.image',this);
    // For this row, put this description before this image

});

http://jsfiddle.net/bazzle/ott5tx06/

HTML

<div class="section-products">
<div class="row">
    <div class="image">
        image row 1
    </div>
    <div class="description">
        description row 1
    </div>
</div>
<div class="row">
    <div class="image">
        image row 2
    </div>
    <div class="description">
        description row 2
    </div>
</div>
<div class="row">
    <div class="image">
        image row 3
    </div>
    <div class="description">
        description row 3
    </div>
</div>

</div>

CSS

.row div{
    width:45%;
    height:100px;
    display:inline-block;
    margin-bottom:3px;
}
.image{
    background-color:red;
}
.description{
    background-color:green;
}

Answer 1

insertBefore需要一个元素作为其参数。

http://jsfiddle.net/ott5tx06/4/

$('.row').each(function(){ //Select each row

    $('.description',this).insertBefore($('.image',this));
    // For this row, put this description before this image

});

Answer 2

尝试替换jQuery对象选择器

$('.description',this).insertBefore($(".image", this));

用于字符串选择器

'.image',this

不会将context参数this作为.row

处理

http://jsfiddle.net/ott5tx06/5/

或者使用.prependTo()

$('.row').each(function(){ //Select each row   
    $('.description',this).prependTo(this);
    // For this row, put this description before this image    
});

jsfiddle http://jsfiddle.net/ott5tx06/2/

Answer 3

如果你想控制div元素的顺序，试试这个：

$('.row').each(function(){ //Select each row

    $('.description',this).insertBefore($('.image',this));
    // For this row, put this description before this image

});

insertBefore()将元素置于目标之前的集合中，但您需要一个实际目标 - 您无法传递字符串＆amp;像构建jQuery对象时那样分离上下文。

jQuery insertBefore对每个实例的意外行为

3 个答案: