这个问题与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。
最终结果应为:
130
195
220
140
740
其中140和740属于自己的组,因为它们包含一个类名为“ anotherGroup”的元素。
希望这是有道理的。很感谢任何形式的帮助。
最佳答案
这可以使用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