데이터 id를 사용하는 jQuery 정렬 요소

Question

(질문이 이미 있으면 죄송합니다.)

저는 jQuery 개발을 처음 접했습니다. 로 내가 좋아하는 것

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

그들을 정렬 : 다음과 같이

나는 HTML 구조를 가지고 나는 기능

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

을 사용하고

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

그러나 그것은 작동하지 않습니다 예상대로 ..

처음에는 잘 작동하지만 새로운 요소를 추가하거나 데이터 - 시드를 변경할 때 작동하지 않습니다.

편집 : 작동하지

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

데모?

Answer 1

당신은 당신이 parseInt 또는 + 연산자를 사용하여 문자열을 숫자로 변환 할 경우 요소의 data-* 속성, 그것은 문자열을 반환하는 사용자 정의의 모든 저장 dataset 속성을 사용할 수 있습니다.

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

http://jsfiddle.net/CFYnE/

그리고 네, 당신의 코드는 여기에 작동 http://jsfiddle.net/f5mC9/

편집 : IE10 있습니다!

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

Answer 2

$('.clist div').sort(function(a,b) { 
    return a.dataset.sid > b.dataset.sid ? 1 : -1; //be carefull, string comparaison 
}).appendTo('.clist'); 

아니면

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

종류 (음/양의 처리) : 당신은 당신이 대신 jQuery의 .data() 방법을 사용할 수있는 모든 브라우저를 지원하려는 경우 아래의 .dataset 속성을 지원하지 않습니다 보고;

Answer 3

더 일반적인 기능을 사용하여 요소를 정렬하려면 jQuery를 :

$.fn.sortChildren = function (sortingFunction: any) { 

    return this.each(function() { 
     const children = $(this).children().get(); 
     children.sort(sortingFunction); 
     $(this).append(children); 
    }); 

}; 

사용법 :

$(".clist").sortChildren((a, b) => a.dataset.sid > b.dataset.sid ? 1 : -1);