排序列表ul-> li用于不同的id

时间:2016-07-20 11:58:37

标签: javascript jquery html

我来自What is the easiest way to order a <UL>/<OL> in jQuery?

工作正常。

但是我需要在不同的ID上,所以我试着把它放在一个函数中。

我试过了:

var sortmenues = ['#firstid', '#secondid', '#anotherid'];

function sortuls(paths) {
    jQuery.each(paths,function(index, value) {
        var items = jQuery(value).get();
        items.sort(function(a,b){
            var keyA = jQuery(a).text();
            var keyB = jQuery(b).text();

            if (keyA < keyB) return -1;
            if (keyA > keyB) return 1;
            return 0;
        });
        var ul = jQuery(value);
        jQuery.each(items, function(i, li){
            ul.append(li);
        });
    });
}

jQuery(function() {
    sortuls(sortmenues);
});

但是我不工作,只是为了数组中的第一个元素。

我尝试复制代码段,但我也只是在第一个元素上工作。

像:

var items = jQuery('#firstid li').get();
...
var ul = jQuery('#firstid');
...
}); 
var items = jQuery('#secondid li').get();
...
var ul = jQuery('#secondid');
...
}); 

这也不适用于所有元素:

jQuery.each([ '#firstid', '#secondid' ], function( index, value ) {
    var items = jQuery(value + ' li').get();

    items.sort(function(a,b){
        var keyA = jQuery(a).text();
        var keyB = jQuery(b).text();

        if (keyA < keyB) return -1;
        if (keyA > keyB) return 1;
        return 0;
    });
    var ul = jQuery(value);
    jQuery.each(items, function(i, li){
        ul.append(value + 'li');
    });
});

有人可以告诉我,我做错了吗?

html是

...
<ul id="firstid">
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
    <li>Delta</li>
</ul>
...
<ul id="anotheridNosortinghere">
    <li>Alphaa</li>
    <li>Betaa</li>
    <li>Gammaa</li>
    <li>Deltaa</li>
</ul>
...
<ul id="secondid">
    <li>Alphaa</li>
    <li>Betaa</li>
    <li>Gammaa</li>
    <li>Deltaa</li>
</ul>
...

1 个答案:

答案 0 :(得分:0)

鉴于您的HTML,您只需对您提供的每个ul选择器进行简单循环,然后按照文本值对子li元素进行排序。试试这个:

$('#firstid, #secondid').each(function() {
    $(this).find('li').sort(function(a, b) {
    	return $(a).text() < $(b).text() ? -1 : 1;
    }).appendTo(this);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="firstid">
    <li>Delta</li>
    <li>Beta</li>
    <li>Alpha</li>
    <li>Gamma</li>
</ul>

<ul id="anotheridNosortinghere">
    <li>Deltaa</li>
    <li>Gammaa</li>
    <li>Alphaa</li>
    <li>Betaa</li>
</ul>
^ Not sorted

<ul id="secondid">
    <li>Betaa</li>
    <li>Alphaa</li>
    <li>Deltaa</li>
    <li>Gammaa</li>
</ul>