Question

<div id="grape">grape</div>
<div id="apple">apple</div>
<div id="orange">orange</div>

我有一个数组fruits = ['apple','grape','orange']，如何根据我的数组的顺序改变上面的dom？

Answer 1

如果您有父元素

<div id="parent">
    <div id="grape">grape</div>
    <div id="apple">apple</div>
    <div id="orange">orange</div>
</div>

然后

var fruits = ['apple', 'grape', 'orange'];

jQuery(function () {
    var $p = $('#parent');
    $p.children().sort(function (a, b) {
        return fruits.indexOf(a.id) - fruits.indexOf(b.id)
    }).appendTo($p)
})

演示：Fiddle

Answer 2

您可以非常轻松地重建内容：

HTML：

<button id="go">Sort</button>
<div id="fruits">
   <div id="grape">grape</div>
   <div id="apple">apple</div>
   <div id="orange">orange</div>
</div>

代码：

var fruits = ['apple','grape','orange'];
$("#go").click(function() {
    var container = $("#fruits");
    container.empty();
    fruits.forEach(function(item) {
        container.append('<div id="' + item + '">' + item + '</div>');
    });
});

工作演示：http://jsfiddle.net/jfriend00/muz9tzb6/

或者，您可以使用数组包含ID值的事实来重新排列现有元素，如下所示：

var fruits = ['apple','grape','orange'];
$("#go").click(function() {
    var parent = $("#fruits");
    fruits.forEach(function(item) {
        $("#" + item).appendTo(parent);
    });
});

工作演示：http://jsfiddle.net/jfriend00/39kge2rw/

使用jquery / javascript安排dom顺序

2 个答案: