Question

这是我的HTML

<div class="products-grid">
    <div data-sort="3" class="swiper-slide">Test</div>
    <div data-sort="1" class="swiper-slide">Test</div>
    <div data-sort="2" class="swiper-slide">Test</div>
</div>

这是我试过的js：

jQuery( document ).ready(function() {
    function getSorted(selector, attrName) {
        return jQuery(jQuery(selector).toArray().sort(function(a, b){
            var aVal = parseInt(a.getAttribute(attrName)),
                bVal = parseInt(b.getAttribute(attrName));
            return aVal - bVal;
        }));
    }
    getSorted('.products-grid .swiper-slide', 'data-sort');
});

它不起作用。我想在data-sort属性之后对其进行排序。有人可以帮我这个吗？

Answer 1

您需要将已排序的元素添加到DOM

jQuery(document).ready(function() {
  function getSorted(selector, attrName) {
    return jQuery(selector).toArray().sort(function(a, b) {
      var aVal = parseInt(a.getAttribute(attrName)),
        bVal = parseInt(b.getAttribute(attrName));
      return aVal - bVal;
    });
  }

  var sortedElements = getSorted('.products-grid .swiper-slide', 'data-sort');
  jQuery('.products-grid').append(sortedElements);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="products-grid">
  <div data-sort="3" class="swiper-slide">Test 3</div>
  <div data-sort="1" class="swiper-slide">Test 1</div>
  <div data-sort="2" class="swiper-slide">Test 2</div>
</div>

Answer 2

这是因为您要排序元素数组，而不是DOM

中的元素

＆＃13;

jQuery( document ).ready(function() {
   function getSorted(selector, attrName) {
      return jQuery(jQuery(selector).toArray().sort(function(a, b){
          var aVal = parseInt(a.getAttribute(attrName)),
              bVal = parseInt(b.getAttribute(attrName));
        
          return aVal - bVal;
      }));
  }
  $('.products-grid').html( getSorted('.products-grid .swiper-slide', 'data-sort')  );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="products-grid">
   <div data-sort="3" class="swiper-slide">Test 3</div>
   <div data-sort="1" class="swiper-slide">Test 1</div>
   <div data-sort="2" class="swiper-slide">Test 2</div>
</div>

＆＃13;

使用jQuery排序问题

2 个答案: