jquery 使用数组值对元素进行排序

Question

我需要根据它的属性对一些元素进行排序。举个例子：

<div id="sort">
<div n="1"></div>
<div n="2"></div>
<div n="3"></div>
<div n="4"></div>
</div>

array_num

{3, 2, 1, 4}

伪代码：

$('#sort').sort(array_num, 'n');

结果将是：

<div id="sort">
<div n="3"></div>
<div n="2"></div>
<div n="1"></div>
<div n="4"></div>
</div>

Answer 1

​var order = [3, 2, 4, 1]​;
var el = $('#sort');
var map = {};

$('#sort div').each(function() { 
    var el = $(this);
    map[el.attr('n')] = el;
});

for (var i = 0, l = order.length; i < l; i ++) {
    if (map[order[i]]) {
        el.append(map[order[i]]);
    }
}

此处有完整代码

Answer 2

未经测试...

$.fn.asort = function (order, attrName) {
    for(var i = 0, len = order.length; i < len; ++i) {
        this.children('[' + attrName + '=' + order[i] + ']').appendTo(this);
    }
}

Answer 3

我偶然发现了这个，试图解决我所追求的问题。
我采用了 @shrikant-sharat 的方法并添加了一些内容，因为我需要排序的属性实际上位于子元素上。我想我会在这里添加，以防它对任何人（以及未来的我！）有帮助。

$.fn.asort = function (order, attrName, filter) {
  console.log(this.length, order.length, order);
  for(var i = 0, len = order.length; i < len; ++i) {

    if(typeof(filter) === 'function') {
      filter(this.children(), attrName, order[i]).appendTo(this);
    } else {
      this.children('[' + attrName + '=' + order[i] + ']').appendTo(this);
    }
  }
  return this.children();
}

它允许您传递一个过滤器函数来匹配您想要的元素。我认为这不是最有效的，但它对我有用，例如：

$('.my-list').asort(mapViewOrder, 'data-nid', function(items, attrName, val) {
  return items.filter(function(index, i) {
    return ($(i).find('[' + attrName + '="' + val + '"]').length);
  });
});

Answer 4

由于 jQuery 返回一个对象数组，您可以使用 sort 方法，然后按照新排序的顺序将子项“重新附加”到父项：

var order = [3, 2, 1, 4];

var div = $('#sort');

div.children().sort((a, b) => {
  var aIndex = order.indexOf(parseInt(a.getAttribute('n')));
  var bIndex = order.indexOf(parseInt(b.getAttribute('n')));

  return aIndex - bIndex;
}).appendTo(div);

#sort > div {
  padding: 10px;
  border-bottom: 1px solid #E1E1E1;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sort">
  <div n="1">1</div>
  <div n="2">2</div>
  <div n="3">3</div>
  <div n="4">4</div>
</div>