Question

我的html中有两个div一个接一个地放置。我不想交换它们。

<div class="1"></div> 
<div class="2"></div>

我想换掉1和2。

Answer 1

如果要在当前元素之后移动元素，请使用after()或insertAfter()方法;如果要在元素之前移动元素，请使用before()或insertBefore()方法当前元素。

＆＃13;

$('#a').before($('#b'));
// or
$('#b').insertBefore('#a');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">a</div>
<div id="b">b</div>

＆＃13;

Answer 2

我想你想改变你div的位置。

代码很简单，但您需要将jQuery 导入代码。

<div class="www">
<div class="div1">first div</div>
<div class="div2">second dive</div>
</div>

创建一个js文件并使用这个jQuery代码

$('.div2').each(function () {
        $(this).insertBefore($(this).prev('.div1'));
});

您还可以检查此CODEPEN链接

http://codepen.io/feizel/pen/egPBEz

Answer 3

您需要将div 1插入临时变量，然后将其删除并插入div 2之后。

<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>

<div id='div_1'>this is div 1</div>
<div id='div_2'>this is div 2</div>

<script>
jQuery(document).ready(function(){
	var temp = jQuery('#div_1');
	jQuery('#div_1').remove();
	jQuery('#div_2').after(temp);
})
</script>

Answer 4

您可以使用css flexbox来实现此目的。将您的div包装在父容器中并应用flexbox来根据需要定位它们。

假设你包装你的div，然后你的html代码是

<div class="wrapper">
 <div id="first_div">first div</div>
 <div id="second_div">second div</div>
</div>

和你的css代码

.wrapper {
display: flex;
flex-direction: column;
}

#first_div {
height: 200px; 
order: 2;
}

#second_div {
height: 300px; 
order: 1;
}

虽然唯一的缺点是你不能在旧的IE浏览器中使用它。

Answer 5

Flexbox将成为您的朋友，如果您可以疏远任何仍在使用IE9 or older的人。

您只需要在容器/父div上使用两行代码。

display: flex;
flex-direction: column-reverse;

https://jsfiddle.net/PaulvdDool/Lzq7vpxn/

如何在HTML代码中交换div的顺序？

5 个答案: