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

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元素看起来像

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

然后使用detach而不是remove，以便它仍然将信息保存在内存中，然后将其附加到父级。

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>