重新定位元素與jQuery

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

使用

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

after()會幫助你的元素選定的元素

Answer 3

您可以通過循環在.child元素，並使用insertAfter()將它們放置後，實現這一目標他們最親密的父母.parent元素：

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

Example fiddle

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

Here is the JSFiddle demo

您可以通過檢查年齡:)