jQuery:根据 ID 对 Div 进行排序,基于 ID 列表

标签 jquery arrays sorting

如果有一个 Javascript ID 数组

var myArray = ['2', '1', '3'];

现在,我也有了一组具有相应ID的DIVS。

<div id='container'>
   <div id='item1'>1</div>
   <div id='item2'>2</div>
   <div id='item3'>3</div>
</div>

有没有一种简单的方法可以根据数组顺序对这些 div 进行排序?我曾想过仅循环遍历 div 并使用 insertBefore()insertAfter() 重新排列项目,但我想知道是否有更好的方法..

这是我迄今为止想到的( JSFiddle DEMO )

(function( $ ){
    $.fn.jaySort= function(prefix, lst) {
        var prev=null;
        for (var x=0; x<lst.length; x++){
            if (!prev) prev = $('#placeHolder');
            $('#' + prefix + lst[x]).insertAfter(prev);
            prev = $('#' + prefix + lst[x]);
        }
    };
})( jQuery );  


///////////////////////////////////////////

var myArray = ['2', '1', '3'];
$('#container').jaySort('item', myArray);

更新

根据下面接受的答案,代码已改进为:

(function( $ ){
    $.fn.jaySort= function(prefix, lst) {
        for (var x=0; x<lst.length; x++)
            $(this).append($('#' + prefix + lst[x]));
    };
})( jQuery );  
$('#container').jaySort('item', ['3', '2', '1']);

最佳答案

这也有效(而且更短)

<div id='container'>
   <div id='item1'>1</div>
   <div id='item2'>2</div>
   <div id='item3'>3</div>
</div>

var myArray = ['2', '1', '3'];

$.each(myArray,function(index,value){
   $('#container').append($('#item'+value));
});

jsFiddle

关于jQuery:根据 ID 对 Div 进行排序,基于 ID 列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5473915/

相关文章:

javascript - 访问对象内部的数组

arrays - 使用递归以螺旋模式遍历二维数组

javascript - 在 Array A 之后对 Array B 排序,这样引用和相等的 Primitives 保持准确的位置

javascript - 根据预定义的顺序对字符串列表进行排序

php - 莱格伯排序的问题

javascript - 如何使用 JavaScript 检查打印机是否缺纸

jquery - 在 jQuery 中测试下一个元素

java - 如何在两个不同的类中使用相同的 add() 方法

javascript - 使用 javascript 在可克隆表单文本字段中插入值

javascript - 在两个或多个功能之间切换