在jQuery中选择时如何排序DOM元素?

2021/01/31 12:11 · jquery ·  · 0评论

我的页面上有以下DIV:

<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代码选择Divs $("div[id*=pi_div]")

在选择器上执行each()时,我需要根据其ID对div进行排序。当我遍历DIV时,顺序应为:PI_DIV1,PI_DIV2,PI_DIV3,PI_DIV4,PI_DIV5,PI_DIV6。如何在jQuery中做到这一点?

你可以调用的.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"));});

编辑:我想知道为什么其他答案正在删除pi_divid一部分,我明白了。如果您基于“字符串”进行比较,pi_div10则会出现在之前pi_div2

如果您还想在页面上对其进行明显排序

$('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/

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

http://jsfiddle.net/KrX7t/

我将使用Array.sort方法。http://jsfiddle.net/LJWrg/

var divArr = $("div[id*=pi_div]");
function cleanId(id) {
    return parseInt(id.replace("pi_div",""),10);
}
Array.prototype.sort.call(divArr,function(a,b) {
    return cleanId(a.id) > cleanId(b.id);
});
divArr.each(function(){
    console.log(this.id);
});

jQuery确实在内部定义了此方法,因此您可以将其简化为(不过,它使用未记录的方法)http://jsfiddle.net/LJWrg/1/

var divArr = $("div[id*=pi_div]");
function cleanId(id) {
    return parseInt(id.replace("pi_div",""),10);
}
divArr.sort(function(a,b) {
    return cleanId(a.id) > cleanId(b.id);
});
divArr.each(function(){
    console.log(this.id);
});
本文地址:http://jquery.askforanswer.com/zaijqueryzhongxuanzeshiruhepaixudomyuansu.html
文章标签: ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!