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()或过滤器：

e.g。使用.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元素之后来实现此目的：

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

Example fiddle

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

Here is the JSFiddle demo

您可以通过检查年龄元素来检查结构：）

用jquery重新定位html中的元素

5 个答案: