將元素移到父元素的末尾

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>