Javascript 如何在不重新组织具有相同数据属性的现有div的情况下，对动态添加了数据属性的div进行排序

我有一个动态添加的div，如下所示：

<div class="pick" id="1" data-costo="1">1</div>
<div class="pick" id="3" data-costo="1">3</div>
<div class="pick" id="0" data-costo="4">4</div>
<div class="pick" id="2" data-costo="6">6</div>

1
3.
4.
6.

在“包装器”分区中：

加法函数是这样的，在这个函数之后，order函数将启动

for (righe+incrementi;righe+incrementi < 30 ; righe++) {
var container = document.createElement('div'); 
container.id = contatore;   
table.appendChild(container); 
contatore = contatore +1;

for（righe+incrementi；righe+incrementi<30；righe++）{
var container=document.createElement（'div'）；
container.id=contatore；
表2.附件（容器）；
contatore=contatore+1；

我有一个正常工作的排序功能：

$(document).ready(function(){
$("[id^='scelta']").on('click', function sortAll() {
    $("#mazzo").each(function() {
        var items = $(this).children("div").sort(function(a, b) {
        var vA = $(a).data("costo");
        var vB = $(b).data("costo");
        return (vA < vB) ? -1 : (vA < vB) ? 0 : 1;
        });
        $(this).append(items);
    });
});
});

$（文档）.ready（函数（）{
$（“[id^='scelta']”）。在（'click'，函数sortAll（）上{
$（“#mazzo”）。每个（函数（）{
var items=$（this.children（“div”）.sort（函数（a，b）{
var vA=$（a）.数据（“costo”）；
var vB=$（b）.数据（“costo”）；
返回值（vA

其中，[id^='scelta']是一组div，用于触发#mazzo div中新div的append函数，然后该函数将一次对所有div进行正确排序

问题是：如果我插入另一个具有相同“data costo”的div，则新div将放在现有div的顶部。 例如，如果我添加

<div class="pick" id="4" data-costo="1">8</div> 

8

结果是：

<div id="mazzo">
**<div class="pick" id="4" data-costo="1">8</div>**
<div class="pick" id="1" data-costo="1">1</div>
<div class="pick" id="3" data-costo="1">3</div>
<div class="pick" id="0" data-costo="4">4</div>
<div class="pick" id="2" data-costo="6">6</div>
</div>

**8**
1.
3.
4.
6.

是否有一种方法可以组织div，使现有的div保持在与下面示例相同的位置

<div id="mazzo">
<div class="pick" id="1" data-costo="1">1</div>
<div class="pick" id="3" data-costo="1">3</div>
**<div class="pick" id="4" data-costo="1">8</div>**
<div class="pick" id="0" data-costo="4">4</div>
<div class="pick" id="2" data-costo="6">6</div>
</div>

1.
3.
**8**
4.
6.

---

看到这种连续的重新组织真是令人恼火…

为订单添加另一个数据属性，以及一个在添加新项目时也可以增加的变量

然后将该

顺序

包含在排序函数中：

var costos=[1,4,6]， 订单=1， itemNum=6， $mazzo=$（“mazzo”）； 函数addItem（）{ 订单++； itemNum++；//仅用于演示显示 var costo=costos[Math.floor（Math.random（）*costos.length）]； var$item=$（''）.data（{costo:costo，order:order}）.text（itemNum）； $mazzo.append（$item）； 索特马佐（） } $（“按钮”）。单击（添加项） 函数sortMazzo（）{ var items=$mazzo.children（“div”）.sort（函数（a，b）{ var aData=$（a）.data（）， b数据=$（b）.data（）； 返回aData.costo==bData.costo？aData.order-bData.order:aData.costo-bData.costo； }); $mazzo.append（项目） }

添加项
1.
3.
4.
6.

为订单添加另一个数据属性和一个变量，在添加新项目时也可以增加该变量

然后将该

顺序

包含在排序函数中：

var costos=[1,4,6]， 订单=1， itemNum=6， $mazzo=$（“mazzo”）； 函数addItem（）{ 订单++； itemNum++；//仅用于演示显示 var costo=costos[Math.floor（Math.random（）*costos.length）]； var$item=$（''）.data（{costo:costo，order:order}）.text（itemNum）； $mazzo.append（$item）； 索特马佐（） } $（“按钮”）。单击（添加项） 函数sortMazzo（）{ var items=$mazzo.children（“div”）.sort（函数（a，b）{ var aData=$（a）.data（）， b数据=$（b）.data（）； 返回aData.costo==bData.costo？aData.order-bData.order:aData.costo-bData.costo； }); $mazzo.append（项目） }

添加项
1.
3.
4.
6.

您应该了解“id”属性在给定文档中必须是唯一的。看起来您反复使用id“mazzo”。您到底是如何添加该div的？您不应该在插入新div后立即调用排序函数以便对其进行组织吗？我不会反复使用相同的id，#mazzo它是“包装器”对于插入的div，它不是每次我添加div时都添加的，添加的div有唯一的id（id=“0”，id=“1”，id=“2”等等）@Lixus添加函数是这样的，在该函数之后，order函数将为（righe+incrementi；righe+incrementi<30；righe++）{var container=document.createElement（'div'）；container.className='pick'；container.id=contatore；table.appendChild（container）；contatore=contatore+1；如果您编辑您的问题并添加代码，效果会更好。您应该理解“id”属性在给定文档中必须是唯一的。看起来您使用的是id“mazzo”一次又一次。你到底是如何添加那个div的，你不应该在插入新div后立即调用排序函数以使其组织起来吗？我不是一次又一次地使用同一个ID，#mazzo它是插入div的“包装器”，不是每次添加div时都添加它，添加的div具有唯一的ID（ID=“0”、ID=“1”、ID=“2”等等）@lixu的添加函数如下所示，在该函数之后，order函数将为（righe+incrementi；righe+incrementi<30；righe++）{var container=document.createElement（'div'）；container.className='pick'；container.id=contatore；table.appendChild（container）；contatore=contatore+1；如果您编辑您的问题并添加代码，那么效果会更好！请接受答案！但我不认为这是我想要实现的，div的顺序必须是data costo属性，代码段不会向新div添加新的data costo。因此，否则我无法理解您的答案（我是一名新的编码人员）或者这不是我想要的。无论如何，谢谢你的时间！如果你不添加它，那么就没有办法排序。你可以看到我是如何添加它并使用它的。我的解决方案是：$（“[id^='scelta']”）。在（'click'，function sortAll（）{$（“#mazzo”）。每个（function（）{var items=$（this）。子（“div”）。排序（function（a，b）{var vA=$（a.data（）；var vB=$（b.data（）；return vA.costo===vB.costo？vA.id-vB.id:vA.costo-vB.costo；}）；$（this.append（items）；}）；还有一件事，在chrome中有一个bug，如果你对10个以上的元素进行排序，我如何修复它？bug是什么？创建一个复制它的演示，感谢答案！但我不认为这是我想要实现的，di的顺序

<div id="mazzo">
<div class="pick" id="1" data-costo="1">1</div>
<div class="pick" id="3" data-costo="1">3</div>
**<div class="pick" id="4" data-costo="1">8</div>**
<div class="pick" id="0" data-costo="4">4</div>
<div class="pick" id="2" data-costo="6">6</div>
</div>