对两组 div 进行排序答案

【问题标题】：Sorting divs in two groups对两组 div 进行排序
【发布时间】：2013-09-18 18:31:43
【问题描述】：

这个问题与this question 有关，但我还有另一个问题需要帮助。我希望能够将我的 div 分为两组 - 均已排序。排序已经有效，但是我如何将我的鸽子分成两组？第 2 组中的容器 div 包含一个 class="anotherGroup" 的元素。

标记是这样的：

<div class="container">
  <div class="terminal" data-price="195">
      <h3>195</h3>
  </div>
  195 - I should come in 2nd in group 1 which is displayed first.
</div>

<div class="container">
  <div class="terminal" data-price="220">
      <h3>220</h3>
  </div>
  220 - I should come in 3rd in group 1 which is displayed first.
</div>

<div class="container">
  <div class="terminal" data-price="740">
      <h3>740</h3>
  </div>
  740 - I should come in 2nd in group 2 which is displayed last.
  <div class="anotherGroup">Group 2</div>
</div>

<div class="container">
  <div class="terminal" data-price="140">
      <h3>140</h3>
  </div>
  140 - I should come in 1st in group 2 which is displayed last.
  <div class="anotherGroup">Group 2</div>
</div>

<div class="container">
  <div class="terminal" data-price="130">
      <h3>130</h3>
  </div>
  130 - I should come in 1st in group 1 which is displayed first.
</div>

脚本：

$('.terminal').sort(function (a, b) {
  return $(a).data('price') - $(b).data('price');
}).map(function () {
  return $(this).closest('.container');
}).each(function (_, container) {
  $(container).parent().append(container);
});

Fiddle here.

最终结果应该是：

其中 140 和 740 属于它们自己的一个组，因为它们包含一个类名为“anotherGroup”的元素。希望这是有道理的。非常感谢任何帮助。

【问题讨论】：

假设您只有两个组。 fiddle.

标签： jquery sorting

【解决方案1】：

这可以使用insertAfter来实现：

var _count = 0;
$('.terminal').sort(function (a, b) {
    return $(a).data('price') - $(b).data('price');
}).map(function () {
    return $(this).closest('.container');
}).each(paint);

function paint(_, container) {
    if ($(container).children('.anotherGroup')[0]) {
        $(container).parent().append(container);
    } else {
        var next = paint.next;
        if (next) {
            $(container).insertAfter(next);
        } else {
            $(container).parent().prepend(container);
        }
        paint.next = container;
    }
};

Working Fiddle

【讨论】：

为了理解清楚，我加了cmets..fiddle.
这很整洁。效果很好。非常感谢您的帮助。

【解决方案2】：

您可以在群组中动态添加另一个data-：

// attr() required for dynamic data-xxx
$('.terminal').attr('data-group', 'Group 1'); 
$('.anotherGroup').each(function(el) {
    $(this).prev('.terminal').attr('data-group', $(this).html());
});
// Result : <div class="terminal" data-price="140" data-group="Group 2">

并使用data-group 和data-price 的串联来比较您的元素：

$('.terminal').sort(function (a, b) {
    var atxt = $(a).data('group')+$(a).data('price');
    var btxt = $(b).data('group')+$(b).data('price');
    return atxt.toLowerCase().localeCompare(btxt.toLowerCase());
}).map(function () {
    return $(this).closest('.container');
}).each(function (_, container) {
    $(container).parent().append(container);
});

Updated JsFiddle

注意：如果您保持字母顺序（“第 2 组”、“第 3 组”...），这将适用于任何组

【讨论】：

这个解决方案也可能派上用场。谢谢。