[JQUERY] 속성 '데이터 정렬'을 기반으로 jQuery를에 정렬 된 div?

속성 '데이터 정렬'을 기반으로 jQuery를에 정렬 된 div?

해결법

1. ---

   1.이 기능을 사용하여

   이 기능을 사용하여

      var result = $('div').sort(function (a, b) {
   
         var contentA =parseInt( $(a).data('sort'));
         var contentB =parseInt( $(b).data('sort'));
         return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
      });
   
      $('#mylist').html(result);
   

   당신은 새로운 된 div를 추가 한 후이 함수를 호출 할 수 있습니다.

   당신이 div의 내 이벤트를 자바 스크립트 유지하려면, DO NOT USE 위의 예에서와 같이 대체 HTML. 대신 사용 :

   $(targetSelector).sort(function (a, b) {
       // ...
   }).appendTo($container);
   

2. ---

   2.내가 jQuery를 기능으로이 만든 :

   내가 jQuery를 기능으로이 만든 :

   jQuery.fn.sortDivs = function sortDivs() {
       $("> div", this[0]).sort(dec_sort).appendTo(this[0]);
       function dec_sort(a, b){ return ($(b).data("sort")) < ($(a).data("sort")) ? 1 : -1; }
   }
   

   당신은 "#boo"거기의 내부의 모든 당신의 작은 div의 같은 큰 사업부가 그래서 :

   "? : -1 1"때문에 크롬 버그의이없이하지 않습니다 종류의 10 명 이상의 div의 당신이 필요합니다! http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html

3. ---

   3.여기에 같은 질문을 답변 :

   여기에 같은 질문을 답변 :

   재 게시 :

   많은 솔루션을 통해 검색 한 후 나는 JQuery와으로 정렬하는 방법에 대한 블로그로 결정했다. 요약하면, 단계 JQuery와 "배열 같은"데이터 속성에 의해 개체를 정렬하는 ...

   html로

   <div class="item" data-order="2">2</div>
   <div class="item" data-order="1">1</div>
   <div class="item" data-order="4">4</div>
   <div class="item" data-order="3">3</div>

   일반 JQuery와 선택기

   $('.item');
   

   [<div class="item" data-order="2">2</div>,
    <div class="item" data-order="1">1</div>,
    <div class="item" data-order="4">4</div>,
    <div class="item" data-order="3">3</div>
   ]

   이 데이터 순서로 정렬 할 수

   function getSorted(selector, attrName) {
       return $($(selector).toArray().sort(function(a, b){
           var aVal = parseInt(a.getAttribute(attrName)),
               bVal = parseInt(b.getAttribute(attrName));
           return aVal - bVal;
       }));
   }

   > getSorted('.item', 'data-order')
   

   [<div class="item" data-order="1">1</div>,
    <div class="item" data-order="2">2</div>,
    <div class="item" data-order="3">3</div>,
    <div class="item" data-order="4">4</div>
   ]

   getSorted ()가 작동하는 방법을 참조하십시오.

   도움이 되었기를 바랍니다!

4. ---

   4.나는 정렬 배열이 아약스 호출에 의해 변경 될 이미지의 갤러리를 정렬하기 위해 사용했다. 희망은 사람에게 유용 할 수 있습니다.

   나는 정렬 배열이 아약스 호출에 의해 변경 될 이미지의 갤러리를 정렬하기 위해 사용했다. 희망은 사람에게 유용 할 수 있습니다.

   VAR에 myArray = '2', '3', '1']; VAR elArray은 [] =; ( '. imgs')를 $. 각 (함수 () { elArray [$ (이) .DATA ( '화상 ID') = $ (이); }); $ .each (myArray의 함수 (지표 값) { $ ( '# 용기') APPEND (elArray [값).; }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

   1

   2

   3

   바이올린 : http://jsfiddle.net/ruys9ksg/

from https://stackoverflow.com/questions/6133723/sort-divs-in-jquery-based-on-attribute-data-sort by cc-by-sa and MIT license