jQuery에서 'data-sort' 속성에 따라 div를 정렬하시겠습니까?

jQuery에서 'data-sort' 속성에 따라 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 data-sort='14'>div1</div>
<div data-sort='6'>div1</div>
<div data-sort='9'>div1</div>

어떻게 하면 모든 디브를 다시 로드하지 않고도 이미 로드된 디브를 순서대로 정렬할 수 있습니까?

화면에 있는 모든 디브의 데이터 종류 값 배열을 구축한 다음 새로운 디브가 어디에 맞는지 확인해야 할 것 같은데 이게 최선의 방법인지 모르겠어요.

이기능을사용합니다.

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

새로운 디브를 추가한 후 바로 이 기능을 호출할 수 있습니다.

divs 내에서 javascript 이벤트를 보존하려면 위 예와 같이 html replace를 사용하지 마십시오.대신 사용:

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

이것을 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' 같은 큰 디브와 그 안에 있는 작은 디브들은?

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

Chrome의 버그 때문에 "? 1 : -1"이 필요합니다. 이것이 없으면 10개 이상의 디브를 정렬할 수 없습니다.

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

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

다시 게시하는 방법:

많은 해결책을 찾아본 후에 저는 jquery를 분류하는 방법에 대해 블로그를 하기로 결정했습니다.요약하면 jquery "array-like" 개체를 데이터 속성별로 정렬하는 단계...

1. jquery selector를 통해 모든 개체 선택
2. 실제 배열로 변환( 배열과 같은 jquery 개체가 아님)
3. 개체 배열을 정렬합니다.
4. 돔 객체 배열을 사용하여 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>

일반 쿼리 선택기

$('.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>]

데이터 순서에 따라 정렬합니다.

함수 getSorted(선택기, 특성 이름) {$($)를 반환합니다.배열(.sort)에 연결합니다(함수(a, b){varaVal = parseInt(a.getAttribute(attrName)),bVal = parseInt(b.getAttribute(attrName));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>]

getSort()가 어떻게 작동하는지 확인합니다.

도움이 되길 바랍니다!

이것을 사용하여 이미지 갤러리를 정렬했습니다. 여기서 정렬 배열은 아약스 호출에 의해 변경됩니다.누군가에게 유용하게 쓰일 수 있기를 바랍니다.

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