Javascript 如何使用 JS 或 jquery 在另一个元素之后移动一个元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14549125/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to move an element after another element using JS or jquery?
提问by user1989195
I would like to move one DIVelement beside another, it is normally like this:
我想将一个DIV元素移到另一个元素旁边，通常是这样的：
<div class="box-content-top">
<div class="box-related-product-top">
<div>
<div class="price">
...
</div>
<div class="image">
...
</div>
<div class="name">
...
</div>
<div class="cart">
...
</div>
<div>
<div class="price">
...
</div>
<div class="image">
...
</div>
<div class="name">
...
</div>
<div class="cart">
...
</div>
</div>
</div>
I want to change the position of the divwith the class .priceto be after the .nameclass, to look like this:
我想div将类的位置更改为在类.price之后.name，如下所示：
<div class="box-content-top">
<div class="box-related-product-top">
<div>
<div class="image">
...
</div>
<div class="name">
...
</div>
<div class="price"> // HERE
...
</div>
<div class="cart">
...
</div>
<div>
<div class="image">
...
</div>
<div class="name">
...
</div>
<div class="price"> // HERE
...
</div>
<div class="cart">
...
</div>
</div>
</div>
回答by techfoobar
You can use insertAfterto move the element. Docs
您可以使用insertAfter移动元素。文档
$('.price').each(function() {
$(this).insertAfter($(this).parent().find('.name'));
});
Here you have the updated fiddle.
在这里你有更新的小提琴。
回答by Nabil Kadimi
$('.box-related-product-top > div').each(function(){
$(this).find('.image').appendTo(this);
$(this).find('.name').appendTo($(this));
$(this).find('.price').appendTo($(this));
$(this).find('.cart').appendTo($(this));
});
Try it: http://jsfiddle.net/m6djm/1/
回答by Matt Steele
<div>'s are block-level elements so that's their natural behavior. You could float the div's and then clear them, or use display: inline.
<div>'s 是块级元素，所以这是它们的自然行为。您可以浮动 div 然后清除它们，或者使用display: inline.
I think this link would help you understand a bit more though:
我认为这个链接会帮助你了解更多：
