问在jQuery中选择时如何对DOM元素进行排序？
EN

Stack Overflow用户

提问于 2013-02-14 23:46:46

回答 4查看 22.6K关注 0票数 22

我的页面上有以下DIVs：

<div id="pi_div3">
  Div 3
</div>
<div id="pi_div2">
  Div 2
</div>
<div id="pi_div1">
  Div 1
</div>
<div id="pi_div6">
  Div 6
</div>
<div id="pi_div5">
  Div 5
</div>
<div id="pi_div4">
  Div 4
</div>

我正在尝试使用jQuery代码$("div[id*=pi_div]")选择Div。

当我在选择器上执行each()时，我需要div根据它们的ID进行排序。当我遍历DIVs时，顺序应该是: PI_DIV1，PI_DIV2，PI_DIV3，PI_DIV4，PI_DIV5，PI_DIV6。我如何在jQuery中做到这一点？

jquery

sorting

回答 4

Stack Overflow用户

回答已采纳

发布于 2013-02-14 23:53:03

您可以在调用.each()之前调用.sort()

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

编辑:我想知道为什么其他答案删除了id的pi_div部分，我明白了。如果根据“字符串”进行比较，pi_div10将排在pi_div2__之前。

票数 20

Stack Overflow用户

发布于 2013-02-15 00:03:11

如果您还想在页面上直观地对它们进行排序

$('div[id^="pi_div"]').sort(function (a, b) {
    var re = /[^\d]/g;
    return ~~a.id.replace(re, '') > ~~b.id.replace(re, '');
})
.appendTo("#container");

请注意将值转换为整数的~~，否则它们将被作为字符串进行比较。

请参阅http://jsfiddle.net/Xjc2T/

票数 8

Stack Overflow用户

发布于 2013-02-14 23:53:54

$("div[id^=pi_div]").sort(function (a, b) {
    return a.id.replace('pi_div', '') > b.id.replace('pi_div', '');
}).foo();

http://jsfiddle.net/KrX7t/

票数 6

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/14878638

复制

相似问题

问在jQuery中选择时如何对DOM元素进行排序？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在jQuery中选择时如何对DOM元素进行排序？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在jQuery中选择时如何对DOM元素进行排序？
EN