gpt4 book ai didi

jquery - 将 div 分为两组

转载 作者:行者123 更新时间:2023-12-01 04:12:18 25 4
gpt4 key购买 nike

此问题与 this question 相关,但我还有另一个问题需要帮助。我希望能够将我的 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>

脚本:

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

关于jquery - 将 div 分为两组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18868897/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com