使用jQuery按id元素排序

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>

- user3112944

---

你能把你目前的代码发出来吗？ - elclanrs

在id或类名中使用数字作为第一个字符是无效的。 - DaniP

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");
});

请查看此代码片段。

---

编辑：

@KiKo正确指出，如果您有一个超过10个元素的列表，则上面的代码会出错。您可以通过将排序函数中的“大于”替换为减号来解决这个问题。

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");
});

这是一个新的JSFiddle链接。

- Jamie Dunstan

---

那个解决方案是唯一一个能够处理数十个类似于时间戳的数字的方案！ - nicolallias

两种解决方案仍然有效！ - Tamim

太棒了！谢谢你！ - Arsenii

我发现这种方法唯一的问题是，如果第一个元素的编号比第二个元素低，则无法正常工作。例如，如果第一个元素的ID为1，后面跟着3、2、4，那么3将被忽略，列表将显示为3、1、2、4。 - user1729506

Answer 2

这里提供了一个解决方案。

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);

- Birrel

---

最后一行也可以是 $('.initial').html(string);，并且只会用新列表替换第一个列表。点此查看演示 http://jsfiddle.net/Kq9nF/2/。 - Birrel

这很快也很酷。 - MFarooqi