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

Full code here

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>

具有数组值的jquery排序元素

4 个答案: