jQuery使用数据ID对元素进行排序 [英] jQuery sort elements using data id

问题描述

（抱歉，如果问题已经存在）

我对jQuery开发非常新颖。

I具有HTML结构如下：

 < div class =clist> 
< div data-sid = 1>< / div> 
< div data-sid = 2>< / div> 
< div data-sid = 2>< / div> 
< div data-sid = 1>< / div> 
< div data-sid = 2>< / div> 
< div data-sid = 2>< / div> 
< div data-sid = 1>< / div> 
< / div> 
  

我想将它们排序为：

 < div class =clist> 
< div data-sid = 1>< / div> 
< div data-sid = 1>< / div> 
< div data-sid = 1>< / div> 
< div data-sid = 2>< / div> 
< div data-sid = 2>< / div> 
< div data-sid = 2>< / div> 
< div data-sid = 2>< / div> 
< / div> 
  

我正在使用函数

 函数sortContacts（）{
 var contacts = $（'div.clist'），cont = contacts.children（'div'）; 
 $ b cont.detach（）。sort（function（a，b）{
 var astts = $（a）.data（'sid'）; 
 var bstts = $ （b）.data（'sid'）
 //返回astts  -  bstts; 
返回（astts> bstts）？（astts> bstts）？1：0：-1; 
}）; 
 
 contacts.append（cont）; 
} 
  

但它没有按预期工作。

它第一次运行良好，但是当添加新元素或更改data-sid时，它不起作用。

编辑：

演示

http://jsfiddle.net/f5mC9/1/

无法使用？

dataset 属性来存储所有的自定义数据 - * parseInt 或 + 运算符。

  $（'。clist div'）。sort（function（a，b）{
 return a.dataset .sid> b.dataset.sid; 
}）。appendTo（'。clist'）; 
  

http：// jsfiddle.net/CFYnE/

是的，您的代码在这里工作， http://jsfiddle.net/f5mC9/

编辑：请注意IE10！和下面不支持 .dataset 属性，如果你想支持所有浏览器，你可以使用jQuery的 .data（）方法代替：

  $（'。clist div'）。sort（function（a，b）{
返回$（a）.data（'sid'）> $（b）.data（'sid'）; 
}）。appendTo（'。clist'）; 
  

(sorry if the question already exists)

I am very new to jQuery development.

I have HTML structure as follows:

<div class="clist">
    <div data-sid=1></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
    <div data-sid=1></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
    <div data-sid=1></div>
</div>

I would like to sort them as:

<div class="clist">
    <div data-sid=1></div>
    <div data-sid=1></div>
    <div data-sid=1></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
</div>

I am using the function

function sortContacts() {
var contacts = $('div.clist'), cont = contacts.children('div');

cont.detach().sort(function(a, b) {
            var astts = $(a).data('sid');
            var bstts = $(b).data('sid')
            //return astts - bstts;
            return (astts > bstts) ? (astts > bstts) ? 1 : 0 : -1;
        });

contacts.append(cont);
}

But it is not working as expected..

It is working well for first time but when add new element or change the data-sid it is not working.

EDIT:

Demo

http://jsfiddle.net/f5mC9/1/

not working?

解决方案

You can use dataset property which stores all of the custom data-* attributes of an element, it returns a string, in case that you want to convert the string to a number you can use parseInt or + operator.

$('.clist div').sort(function(a,b) {
     return a.dataset.sid > b.dataset.sid;
}).appendTo('.clist');

http://jsfiddle.net/CFYnE/

And yes, your code works here, http://jsfiddle.net/f5mC9/

Edit: Please note that IE10! and below do not support the .dataset property, if you want to support all browsers you can use jQuery's .data() method instead:

$('.clist div').sort(function(a,b) {
     return $(a).data('sid') > $(b).data('sid');
}).appendTo('.clist');

这篇关于jQuery使用数据ID对元素进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！