2

这个问题与这个问题有关，但我还有另一个问题需要帮助。我希望能够将我的 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);
});

在这里拉小提琴。

最终结果应该是：

130
195
220
140
740

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

4

2 回答 2

1

您可以在组中动态添加另一个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-groupand的串联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);
});

更新了 JsFiddle

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

于 2013-09-18T10:06:37.160 回答
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;
    }
};

工作小提琴

于 2013-09-18T10:31:43.763 回答