从不同的DIV排序元素

时间:2014-05-14 07:05:29

标签: jquery html sorting

我有3个div列,如下所示

<div class="col col-4 clist">
 <div data-seq="3">3</div>
 <div data-seq="5">5</div>
 <div data-seq="9">9</div>
</div>
<div class="col col-4 clist">
 <div data-seq="8">8</div>
 <div data-seq="7">7</div>
 <div data-seq="1">1</div>
</div>
<div class="col col-4 clist">
 <div data-seq="4">4</div>
 <div data-seq="2">2</div>
 <div data-seq="6">6</div>
</div>

我想按照1 2 3 4 5 6 7 8 9的升序排列这个内部div。如果它们都被整理并显示在一个div中和/或显示在3个不同的div中并不重要。出于同样的目的,我使用以下http://jsfiddle.net/f5mC9/

中写的js
var contacts = $('div.clist'), cont = contacts.children('div');

cont.detach().sort(function(a, b) {
            var astts = $(a).data('seq');
            var bstts = $(b).data('seq')
            //return astts - bstts;
            return (astts > bstts) ? (astts > bstts) ? 1 : 0 : -1;
        });

contacts.append(cont);

我无法对来自不同div的元素进行排序。如果所有元素都在单个div中,则代码可以正常工作。

请帮帮我。

并提前感谢。

1 个答案:

答案 0 :(得分:1)

由于您可以将结果放在一个div中,只需先将所有字段提取到一个新的div中:

<div id="result">
</div>

$('div.clist').each(function() {
    $('#result').html($('#result').html() + $(this).html());
});

然后开展您的业务并对其进行排序:

var $cont = $('#result').children('div').sort(function (a, b) {
    var astts = $(a).data('seq');
    var bstts = $(b).data('seq')
    return (astts > bstts) ? 1 : -1;
});

$('#result').append($cont);

JSFiddle: http://jsfiddle.net/pSC98/1/