用jQuery重新定位HTML中的元素

Question

我不知道如何以最佳方式實現這一目標：假設我有：

 <div class="parent"> <div class="child"></div> </div> <div class="parent"> <div class="child"></div> </div> <div class="parent"> <div class="child"></div> </div> 

我想將每個“孩子”都移到其父母之后。

 <div class="parent"></div> <div class="child"></div> <div class="parent"></div> <div class="child"></div> <div class="parent"></div> <div class="child"></div> 

我該如何實現？

更新：另外，如何排除具有某些屬性的父母？ 例如，我需要排除那些data-anchor = 2和data-anchor = 3的設備，但我不知道該怎么做。

Answer 1

$(".parent").each(function(){
    $(this).after($(".child", this));
});

JSFiddle： https ：//jsfiddle.net/TrueBlueAussie/onsb12jx/

注意： $(".child", this)只是$(this).find(".child")的較短版本

排除元素可以使用.not()或:not()或過濾器：

例如使用.not()

$(".parent").not('[data-anchor=2],[data-anchor=3]').each(function(){
    $(this).after($(".child", this));
});

或使用:not偽選擇器

$(".parent:not([data-anchor=2],[data-anchor=3])").each(function(){
    $(this).after($(".child", this));
});

或使用filter()函數

$(".parent").filter(function(){
        return $(this).data('anchor') == "2" || $(this).data('anchor') == "3";
    }).each(function(){
    $(this).after($(".child", this));
});

Answer 2

您可以通過遍歷.child元素並使用insertAfter()將它們放在最接近的父.parent元素之.child實現此.parent ：

$('.parent .child').each(function() {
    $(this).insertAfter($(this).closest('.parent'));
});

小提琴的例子

Answer 3

采用

$(".parent").each(function() {
  $(this).after($(this).find(".child"));
});

after()將幫助您將元素放置在所選元素之后

Answer 4

您可以將.after(fn)方法與函數一起用作參數以返回所需的行為，它的好處是不必顯式使用循環，這樣，它將在內部為您完成此操作：

 $('.parent').after(function() { return $('.child', this); }); 

 .parent{border:solid red 3px;} .child{border:solid 3px green; margin:3px 0;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <div class="child">child</div> parent </div> <div class="parent"> <div class="child">child</div> parent </div> <div class="parent"> <div class="child">child</div> parent </div> 

Answer 5

您可以使用detach方法這樣做，如下所示：

$(".parent").each(function() {
  $(this).after($(this).find(".child").detach());
});

這是JSFiddle演示

您可以通過檢查年齡元素來檢查結構：)