将元素移到父元素的末尾

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>

我想使用任何具有class 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> 

Answer 2

以这种方式尝试，将父元素保存为变量

var theParent = $(".work-item .text-container:first-child").parent();

$(".work-item .text-container:first-child").detach().appendTo(theParent);

然后使用分离而不是删除，以便它仍将信息保存在内存中，然后将其附加到父项。

Answer 3

只需使用insertAfter即可达到您的目的。
这是我的JSFiddle。

var text = $('.text-container');
var img = $('.image-container');
text.insertAfter(img);

Answer 4

尝试

$(".work-item .text-container:nth-child(1)").each(function () {
    var elm = $(this);
    if (elm.next().is($(".image-container"))) {
         var parent = elm.parent();
         parent.append(elm.detach());
    }

});

DEMO

Answer 5

因为，第一个元素可能是“ .text-container”或“ .image-container”。

如果第一个元素是“ .image-container”。

$("#work .work-item .text-container:first-child").length == 0;

所以你得到的第一个元素是不正确的。

这是我的：

 $(document).ready(function() { var workItems = $(".work-item"); var len = workItems.length,i = 0,el,first; for(;i < len; i++){ el = workItems[i]; first = $(el).children().first(); if (first.hasClass("text-container")){ $(el).append(first); } } }); 

 <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>