重新定位元素与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

您可以通过检查年龄:)