Question

我有一个排序方法，我想根据他们的data-position属性对我的div进行排序。目前，由于某种原因，该功能仅根据第一个数字而不是整数来对div进行排序。以下是我html中的一个示例，其中显示了：

HTML

<div class="parent" data-position="1">
    ...
</div>

<div class="parent" data-position="27">
    ...
</div>

<div class="parent" data-position="3">
    ...
</div>

这是 js

$('body').on('click', '.new_comments', function(e) {
    var divArr = $(".parent");
    divArr.sort(function(a, b) {
        return $(a).attr('data-position') > $(b).attr('data-position') ? 1: -1;
    });
$(".comments_container").append(divArr);

});

知道为什么会这样做以及如何解决它？

Answer 1

$(a).attr('data-position')

Attr将属性值作为字符串返回，因此您要比较的是字符串，而不是数字，这是您所期望的。而不是使用attr（）使用data（）。

$(a).data('position')

两者之间的区别在于，如果使用data()，jQuery会尝试将属性中的值自动转换为数字。因此，将值转换为数字后，您应该看到预期的排序。

Answer 2

将字符串数据转换为数字。

$('body').on('click', 'button', function(e) {
  var divArr = $(".parent");
  
  divArr.sort(function(a, b) {
    return +$(a).attr('data-position') > +$(b).attr('data-position') ? 1 : -1;
  });

  $(".comments_container").append(divArr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button>CLICK ME</button>

<div class="comments_container">
  <div class="parent" data-position="1">
    1 </div> 
  <div class="parent" data-position="27">  27  </div> 
  <div class="parent" data-position="3"> 3 </div>
</div>

我首先会收集属性，而不是在回调中反复执行。

$('body').on('click', 'button', function(e) {
  $(".parent")
    .map((i, el) => ({el: el, pos: +el.dataset.position}))
    .sort((a, b) => a.pos > b.pos ? 1 : -1)
    .map((i, {el}) => el)
    .appendTo(".comments_container");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button>CLICK ME</button>

<div class="comments_container">
  <div class="parent" data-position="1"> 1 </div> 
  <div class="parent" data-position="27">  27  </div> 
  <div class="parent" data-position="3"> 3 </div>
</div>

我还在此解决方案中包含了一些现代语法

sort（）按第一个数字排序数据，而不是整数

2 个答案: