我如何使用Javascript根据他们的ID订购我的div？

Question

什么是一些Javascript代码，允许我列出我的div的id名称，然后按顺序显示它们而不必实际更改我页面上的代码？

我不想一次交换两个div来执行此操作，我想要一个列表/数组，我可以输入订单，它将按顺序显示。

我有4个div（div1，div2，div3，div4）

谢谢= D

Answer 1

假设这样的HTML

<div id="wrapper">
    <div id="one">One</div>
    <div id="two">Two</div>
    <div id="three">Three</div>
    <div id="four">Four</div>
</div>

您可以使用jQuery执行此操作

var w = $('#wrapper').html();
var arr = w.split('\n');

$('#wrapper').html(arr[2] + arr[4] + arr[1] + arr[3]);

根据需要更改数组元素的顺序。

注意：我正在根据换行符\n将html拆分为数组。它给出了第一个空白行，正如我从div#wrapper开始收集的那样。因此永远不会使用arr[0]。

示例：http://jsfiddle.net/jasongennaro/yFEVz/1/

Answer 2

这是一个基本的Dom元素排序。我在这里使用的唯一JQuery是收集容器中的所有元素并将它们推送到数组中。您可以删除jquery，但是您必须将nodeList转换为数组以使排序起作用。干杯！

使用尽可能少的JQuery进行此类操作时，以及尽可能少地操作/访问DOM将大大缩短执行时间。

http://jsfiddle.net/rlemon/wATVf/

Answer 3

将有问题的元素（'你的div'）作为一个公共类，并使用它来作为一个组来操作它们 - 使用jQuery，这样做的代码看起来像这样：

$('.my-divs').each(function (idx, val) {
    // sort your elements here;
    // use something like $(val).is('#your-id') to inspect their id.
});

...假设您的div的HTML看起来像这样：

<div id="div1" class="my-divs"> ... </div>
<div id="div2" class="my-divs"> ... </div>
<div id="div3" class="my-divs"> ... </div>
<!-- et cetera -->