按数据属性排序

Question

我正在处理包含自定义数据属性的 div 列表，我想根据选择对这些属性进行排序。例如，如果选择 'followers'，它将排在 .box 的数据跟随者之后。

我的 jsfiddle：https://jsfiddle.net/nbgo117b/

我在想这样的事情，但我做不到。

 $("#sorter").change(function() {
    var value = $("#sorter option:selected").val();
    var boxOrdered;

    if (value == 'date' ){
        boxOrdered = $('.influencer .box').sort(function(a, b){
        return ($(b).data('followers')) < ($(a).data('followers')) ? 1 : -1;
    });
  }
$(".influencer").html(boxOrdered);
});

Answer 1

你可以使用$.sort来比较数据属性，就像这样：

$(document).ready(function() {
      var $influencer = $('.influencer');
       $("#sorter").on('change',function() {
         var criterion = $(this).val();
         $influencer.find('.box').sort(function (a, b) {
           var valA = $(a).find('[data-'+criterion+']').data(criterion);
           var valB = $(b).find('[data-'+criterion+']').data(criterion);
           return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;
         }).appendTo($influencer);
       });
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<selection id="sort">
<select id="sorter">
<option value="default">Sort by</option>
<option value="followers">Most followers</option>
<option value="likes">Most likes</option>
<option value="views">Most views</option>
<option value="date">Newsest</option>
<option value="alpha">Alphabetical order</option>
</select>
</selection>   

 <div class="influencer">
    <div class="box" data-added="20.20.2018">
      <span class="followers" data-followers="1500000">1.5M followers</span>
      <span class="likes" data-likes="200000">200K likes</span>
      <span class="views" data-views="100000">100K video views</span>
    </div>
    <div class="box" data-added="20.20.2018">
      <span class="followers" data-followers="2500000">2.5M followers</span>
      <span class="likes" data-likes="80000">80K likes</span>
      <span class="views" data-views="200000">200K video views</span>
    </div>
</div>

按数据属性排序

Sorting after data-attribute

html

javascript

jquery

custom-data-attribute