[英]Reposition elements in html with jquery
I can't figure how to achieve this in the best way: Let's say I have: 我不知道如何以最佳方式实现这一目标:假设我有:
<div class="parent"> <div class="child"></div> </div> <div class="parent"> <div class="child"></div> </div> <div class="parent"> <div class="child"></div> </div>
And I want to move every 'child' right after it's parent. 我想将每个“孩子”都移到其父母之后。
<div class="parent"></div> <div class="child"></div> <div class="parent"></div> <div class="child"></div> <div class="parent"></div> <div class="child"></div>
How can I achieve this? 我该如何实现?
Update: Also, how can i exclude the parents that have certain attributes? 更新:另外,如何排除具有某些属性的父母? For example, I need to exclude those that have data-anchor=2 and data-anchor=3 I can't figure out how to do this.
例如,我需要排除那些data-anchor = 2和data-anchor = 3的设备,但我不知道该怎么做。
$(".parent").each(function(){
$(this).after($(".child", this));
});
JSFiddle: https://jsfiddle.net/TrueBlueAussie/onsb12jx/ JSFiddle: https ://jsfiddle.net/TrueBlueAussie/onsb12jx/
Note: $(".child", this)
is just a shorter version of $(this).find(".child")
注意:
$(".child", this)
只是$(this).find(".child")
的较短版本
Excluding elements can use either .not()
or :not()
or a filter: 排除元素可以使用
.not()
或:not()
或过滤器:
eg using .not()
例如使用
.not()
$(".parent").not('[data-anchor=2],[data-anchor=3]').each(function(){
$(this).after($(".child", this));
});
or using :not
pseudo selector 或使用
:not
伪选择器
$(".parent:not([data-anchor=2],[data-anchor=3])").each(function(){
$(this).after($(".child", this));
});
or using a filter()
function 或使用
filter()
函数
$(".parent").filter(function(){
return $(this).data('anchor') == "2" || $(this).data('anchor') == "3";
}).each(function(){
$(this).after($(".child", this));
});
You can achieve this by looping over the .child
elements and using insertAfter()
to place them after their closest parent .parent
element: 您可以通过遍历
.child
元素并使用insertAfter()
将它们放在最接近的父.parent
元素之.child
实现此.parent
:
$('.parent .child').each(function() {
$(this).insertAfter($(this).closest('.parent'));
});
Use 采用
$(".parent").each(function() {
$(this).after($(this).find(".child"));
});
after()
will help you to position the element after the selected element after()
将帮助您将元素放置在所选元素之后
You can use .after(fn)
method with a function as an argument to return the desired behavior, a benefit of it is not to use a loop explicitly, This way it will do this for you internally: 您可以将
.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>
You can use detach
method to do that like so: 您可以使用
detach
方法这样做,如下所示:
$(".parent").each(function() {
$(this).after($(this).find(".child").detach());
});
Here is the JSFiddle demo 这是JSFiddle演示
You can check the structure by Inspecting element of the age :) 您可以通过检查年龄元素来检查结构:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.