'data-sort'속성에 따라 jQuery에서 div를 정렬합니까?

'data-sort'속성에 따라 jQuery에서 div를 정렬합니까?

---

여러 div가있는 경우 :

<div data-sort='1'>div1</div>
<div data-sort='4'>div4</div>
<div data-sort='8'>div8</div>
<div data-sort='12'>div12</div>
<div data-sort='19'>div19</div>

그리고 동적으로 div를 만듭니다.

<div data-sort='14'>div1</div>
<div data-sort='6'>div1</div>
<div data-sort='9'>div1</div>

모든 div를 다시로드하지 않고 이미로드 된 div로 정렬되도록하려면 어떻게해야합니까?

화면에있는 모든 div의 데이터 정렬 값 배열을 만들고 새 div가 맞는 위치를 확인해야한다고 생각하지만 이것이 최선의 방법인지 확실하지 않습니다.

---

이 기능을 사용하십시오

   $('div').sort(function (a, b) {

      var contentA =parseInt( $(a).attr('data-sort'));
      var contentB =parseInt( $(b).attr('data-sort'));
      return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
   });

새 div를 추가 한 직후이 함수를 호출 할 수 있습니다.

---

이것을 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와 그 안에 모든 작은 div가 있습니다.

$ ( "# boo"). sortDivs ();

Chrome의 버그로 인해 "? 1 : -1"이 필요합니다. 이것이 없으면 10 개 이상 div를 정렬하지 않습니다! http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html

---

여기에서 같은 질문에 답했습니다.

• https://stackoverflow.com/a/23298715/1007358

재 게시하려면 :

많은 솔루션을 검색 한 후 jquery에서 정렬하는 방법에 대해 블로그 를 작성 하기로 결정했습니다 . 요약하면 데이터 속성별로 jquery "array-like"객체를 정렬하는 단계 ...

1. jquery 선택기를 통해 모든 개체 선택
2. 실제 배열로 변환 (배열과 유사한 jquery 객체가 아님)
3. 객체 배열 정렬
4. DOM 객체 배열을 사용하여 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 () 작동 방식을 참조하십시오.

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

---

I used this to sort a gallery of images where the sort array would be altered by an ajax call. Hopefully it can be useful to someone.

var myArray = ['2', '3', '1'];
var elArray = [];

$('.imgs').each(function() {
    elArray[$(this).data('image-id')] = $(this);
});

$.each(myArray,function(index,value){
   $('#container').append(elArray[value]); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id='container'>
   <div class="imgs" data-image-id='1'>1</div>
   <div class="imgs" data-image-id='2'>2</div>
   <div class="imgs" data-image-id='3'>3</div>
</div>

Fiddle: http://jsfiddle.net/ruys9ksg/

참고URL : https://stackoverflow.com/questions/6133723/sort-divs-in-jquery-based-on-attribute-data-sort