Question

我有这段代码：

<li id="pi_div2"></li>
<li id="pi_div5"></li>
<li id="pi_div4"></li>

我需要这样排序：

<li id="pi_div2"></li>
<li id="pi_div4"></li>
<li id="pi_div5"></li>

我的脚本现在：

<script>
    $("li[id*=pi_div]").sort(function(a,b) {
        if(a.id < b.id) {
            return -1;
        }
        else {
            return 1;
        }
    }).each(function() { console.log($(this).attr("id"));});
</script>

Answer 1

根据您的原始html，您可以执行以下操作：

<强> HTML

<ul id="cat">
    <li id="3">Text 3</li>
    <li id="1">Text 1</li>
    <li id="2">Text 2</li>
</ul>

<强> JavaScript的：

$("#cat li").sort(function (a, b) {
    return parseInt(a.id) > parseInt(b.id);
}).each(function () {
    var elem = $(this);
    elem.remove();
    $(elem).appendTo("#cat");
});

查看this fiddle。

修改

正如@KiKo正确指出的那样，如果列表长度超过十个元素，则上述代码会中断。您可以通过将sort函数中的“大于”替换为减号来解决此问题。

<强> HTML

<ul id="cat"> <li id="3">Text 3</li> <li id="2">Text 2</li> <li id="1">Text 1</li> <li id="9">Text 9</li> <li id="11">Text 11</li> <li id="5">Text 5</li> <li id="7">Text 7</li> <li id="6">Text 6</li> <li id="12">Text 12</li> <li id="4">Text 4</li> <li id="10">Text 10</li> <li id="8">Text 8</li> </ul>

<强> JavaScript的：

$("#cat li").sort(function(a, b) { return parseInt(a.id) - parseInt(b.id); }).each(function() { var elem = $(this); elem.remove(); $(elem).appendTo("#cat"); });

Here's a new JSFiddle.

Answer 2

Here是一个解决方案。

<强> HTML：

<div class="initial">
    <ul id="cat">
        <li id="3">Text 3</li>
        <li id="1">Text 1</li>
        <li id="2">Text 2</li>
    </ul>
</div>
<div class="new"></div>

<强> JavaScript的：

首先，找出有多少列表项。然后按顺序浏览每一个，并将其添加到最终在屏幕上打印出来的字符串中。

var size = $('#cat > li').size()

var string = '<ul>';

for(var i = 1; i<=size; i++){
    string = string.concat('<li>' + $('#'+i+'').html() + '</li>');
}

string = string.concat('</ul>');

$('.new').html(string);

使用jQuery按id元素排序

2 个答案: