用jquery重新定位html中的元素

时间:2016-01-06 13:12:05

标签: javascript jquery html

我无法想出如何以最佳方式实现这一目标: 假设我有:

<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的人,我无法弄清楚如何做到这一点。

5 个答案:

答案 0 :(得分: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));
});

答案 1 :(得分:1)

您可以通过循环.child元素并使用insertAfter()将它们放在最近的父.parent元素之后来实现此目的:

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

Example fiddle

答案 2 :(得分:0)

使用

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

after()将帮助您在所选元素

之后定位元素

答案 3 :(得分:0)

您可以使用.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>

答案 4 :(得分:0)

您可以使用detach方法执行此操作:

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

Here is the JSFiddle demo

您可以通过检查年龄元素来检查结构:)