javascript - 使用 jQuery 对 DOM 节点进行排序 - 当前代码交替反转

Question

我创建了以下代码笔，作为我正在处理的网站的摘录:http://codepen.io/barrychapman/pen/BzJGbg?editors=1010

加载页面时，可以看到有6个框。第一个已启用，而其他 5 个已禁用。单击添加到指标 2 按钮将启用第二个框。

完成此操作后，单击Resort，您将看到发生的行为。我关闭了字段标题的重新标记，以便您可以直接看到行为。您将看到字段现在为:[1,2,6,5,4,3]。

如果您再次单击Resort，它会正确地将字段排序为 [1,2,3,4,5,6]。再点击一下，又恢复原来的样子了。这是用于此目的的代码片段:

$('#target_metrics > div.disabled').each(
  function() {
    var $this = $(this);
    $('#target_metrics').find('div.metric-template:not(.disabled)').last().after($this);
  }
);

我完全被这个问题难住了。本质上，我想做的是在添加/启用/禁用/删除/任何字段后对字段进行排序 - 以相同的顺序。我有几个绑定(bind)到这些节点的数据元素，因此保留顺序将非常有益。

更新

作为不良行为的示例，请按照以下步骤操作:

• 点击度假村
• 点击添加到指标 2

• 点击度假村

  请注意，指标 2 在行末尾启用。

• 点击度假村

  现在请注意，指标 2 位于正确的位置。

• 再次点击Resort。

  现在它已转向其他领域。

Answer 1

看起来你说你想要它[1,2,3,4,5,6]但这意味着你不在乎他们是否残疾。无论哪种方式，您都可以避免很多这种情况，只需在元素上运行 Array.prototype.sort 即可。

您应该尽可能避免多次连续的 DOM 更改(例如在迭代类似数组的对象时) - 获取数据，执行工作，然后将其放回原处。

此外，如果您想在排序的同时按禁用情况对它们进行分组，您可以将它们全部排序，然后将它们过滤到两个单独的数组中，然后将其放回页面上。

请务必查看 MDN's Array.sort() article 如果你还没有的话。

JS(非分组)

// true === Descending order
var direction = false;

function reorderNodes( dir ) {
  var $target = $('#target_metrics');
  var $metricDivs = Array.prototype.sort.call($target.children('div').detach(), function ( a, b ) {
    var _a = a.querySelector('.idx');
    var _b = b.querySelector('.idx');
    if ( _a && _b ) {
      if ( _a.innerHTML > _b.innerHTML ) {
        return dir ? 1 : -1;
      }
      if ( _a.innerHTML < _b.innerHTML ) {
        return dir ? -1 : 1;
      }
    }
    return 0;
  });
  $target.append($metricDivs);
}

并在每次单击按钮时调用此方法(假设您希望允许在单击时更改排序方向 - 否则就不要更改方向)

reorderNodes(direction);
direction = !direction;

http://codepen.io/dhenson02/pen/WxdLwA

对于分组版本，请检查此分支:

http://codepen.io/dhenson02/pen/ZOvVpJ