Jquery 将div分为两组进行排序

这个问题与有关，但我还有一个问题需要帮助。 我希望能够将我的div分为两组-都已排序。排序已经起作用了，但是如何将我的DOV分为两组呢？组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>

最终结果应该是：

130
195
220
140
740

其中140和740属于它们自己的一个组，因为它们包含一个类名为“anotherGroup”的元素。

---

希望这是有意义的。非常感谢您的帮助。

您可以动态添加另一个

数据-

：

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

---

注意：如果您按字母顺序排列（“第2组”、“第3组”…），这将适用于任何组。

这可以通过以下方式实现：

---

为了清楚地理解，我添加了一些评论。那太好了。效果很好。非常感谢你的帮助。假设你只有两个小组。这个解决方案也可能派上用场。谢谢

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

$('.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);
});

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