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

时间:2011-03-29 14:11:29

标签: 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']);

2 个答案:

答案 0 :(得分:6)

这也有效(并且更短)

<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

答案 1 :(得分:0)

我遇到this article也许这就是你要找的?