Question

我有一个带有特定订单的html页面，例如：

    <div id="three"></div>
    <div id="two"></div>
   <div id="one"></div>

但我需要订购它，我可以触摸html，所以，这个想法是使用Javascript / Jquery来做到这一点，有没有办法让它不用触摸HTML？

Answer 1

使用.before：

的简单答案

$('#three').before('#two');
$('#two').before('#one');

Answer 2

使用jQuery：

$('#one').parent().append($('#three')).append($('#one')).append('#two');

这样你就可以按顺序获得div 3,1,2 您正在选择其中一个div，并选择它的父级。然后按照你想要的顺序附加它们。

如果你想使用纯javascript：

var parent = document.getElementById('one').parentNode;
parent.appendChild(document.getElementById('three'));
parent.appendChild(document.getElementById('one'));
parent.appendChild(document.getElementById('two'));

现在，假设你有很多div，我会假设#one直到#ten：
您可以创建一个数组，并根据需要对id进行排序，例如：

var order = ['ten', 'eight', 'six', 'four', 'two', 'nine', 'seven', 'five', 'three', 'one'];
for(var i = 0; i < order.length; i++){
    parent.appendChild(document.getElementById(order[i]));
}

这就是你要找的东西吗？

Answer 3

是的...尝试使用此代码：

$('#two').appendTo($('#one').parent())
$('#three').appendTo($('#two').parent())

订购Div外部

3 个答案: