javascript - 将元素移动到父元素的末尾

Question

我的应用程序中有以下 HTML:

    <div class="work-item">
        <div class="image-container">                
        </div>
        <div class="text-container">
        </div>
    </div>

    <div class="work-item">
        <div class="text-container">                
        </div>
        <div class="image-container">                
        </div>
    </div>

    <div class="work-item">
        <div class="image-container">                
        </div>
        <div class="text-container">
        </div>
    </div>

    <div class="work-item">
        <div class="text-container">                
        </div>
        <div class="image-container">                
        </div>
    </div>

我想获取任何具有 text-container 类的元素，如果它是 work-item 下的第一个元素，则将其移动到带有类的 div 之后image-container，这样每个 div 元素看起来都像

    <div class="work-item">
        <div class="image-container">                
        </div>
        <div class="text-container">
        </div>
    </div>

我试着先用这个删除它:

$(".work-item .text-container:first-child").remove();

这很好用，但是当我尝试用它移动它时，它根本不起作用，什么也没发生:

$("#work .work-item .text-container:first-child").insertAfter($(this).parent()["last-child"]);

有人知道我在这里做错了什么吗？

Answer 1

你可以使用这个:

$('.text-container').each(function(index, item) {
    var $this = $(item);
    $this.appendTo($this.parent());
});

.work-item{
    margin:20px;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="work-item">
    <div class="image-container">img              
    </div>
    <div class="text-container">txt
    </div>
</div>

<div class="work-item">
    <div class="text-container">txt             
    </div>
    <div class="image-container">img           
    </div>
</div>

<div class="work-item">
    <div class="image-container">img        
    </div>
    <div class="text-container">txt
    </div>
</div>

<div class="work-item">
    <div class="text-container">txt             
    </div>
    <div class="image-container">img           
    </div>
</div>