jquery - .before() 多次触发

Question

我想要实现的目标：重新排序所有“行”-div 的内容，因此图像内容始终位于文本内容之前。

html:

<div class="row">
    <div class="image">image content here</div>
    <div class="text">text content here</div>
</div>
<div class="row">
    <div class="text">text content here</div>
    <div class="image">image content here</div>
</div>

之后应该是什么样子：

<div class="row">
    <div class="image">image content here</div>
    <div class="text">text content here</div>
</div>
<div class="row">
    <div class="image">image content here</div>
    <div class="text">text content here</div>
</div>

我的 jQuery：

$('.row').each(function() {
    firstChild = $(this).find(':first-child');
    if(firstChild.hasClass('text')) {
        firstChild.before($(this).find('.image'));
    }
    else {
        console.log("not text");
    }
}

jQuery 将图像 div 以奇怪的顺序放置，在一段代码之后，我看到网站上放置了多个图像。请帮忙 ：）

Answer 1

为什么不只是这个

 $(this).append(firstChild);

代替

firstChild.before($(this).find('.image'));

代码

$('.row').each(function() {
    var firstChild = $(this).find(':first-child');
    if(firstChild.hasClass('text')) {
       $(this).append(firstChild);
    }
    else {
        console.log("not text");
    }
});

检查小提琴