带有数组值的jQuery排序元素答案

【问题标题】：jquery sort element with array value带有数组值的jQuery排序元素
【发布时间】：2010-08-25 06:33:50
【问题描述】：

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

<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>

【问题讨论】：

该订单后面是否有某种logic，或者您是否需要它？
n 不是有效的 html tag 属性。它会导致您在某些浏览器上出现一些不良行为。
@jAndy：我想要完全一样的：D @Reigel：jquery 本身有 expando 属性。
是的，但上面是 html 而不是 jQuery :)
如果你在IE中使用jquery，尝试查看innerHTML你会在html标签中看到jquery的expando属性，例如：
。

标签： jquery jquery-ui-sortable

【解决方案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

【讨论】：

效果很好，即使 $.each() 中的元素缺少其属性 - 只需将元素放在顶部。当匹配元素集中缺少var order 中的数字时，它也可以工作。

【解决方案2】：

未经测试...

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

【讨论】：

【解决方案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);
  });
});

【讨论】：

【解决方案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>

【讨论】：