Question

我有一个动态添加的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中：

<div id="mazzo">
</div>

添加功能就像这样，在该功能之后，命令功能将触发

for (righe+incrementi;righe+incrementi < 30 ; righe++) {
var container = document.createElement('div'); 
container.id = contatore;   
table.appendChild(container); 
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);
    });
});
});

其中[id ^ ='scelta']是一堆div，用于触发#mazzo div中新div的追加函数，然后此函数将立即正确排序所有div。

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

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

结果如下：

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

有没有办法组织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>

看到这种持续的重新组织真是太烦人了......

Answer 1

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

然后在排序函数中包含order：

var costos = [1, 4, 6],
  order = 1,
  itemNum = 6,
  $mazzo = $("#mazzo");

function addItem() {
  order++;
  itemNum++;// just for demo display
  var costo = costos[Math.floor(Math.random() * costos.length)];
  var $item = $('<div class="pick">').data({ costo: costo, order: order}).text(itemNum);
  $mazzo.append($item);
  sortMazzo()
}

$('button').click(addItem)

function sortMazzo() {
  var items = $mazzo.children("div").sort(function(a, b) {
    var aData = $(a).data(),
      bData = $(b).data();
    return aData.costo === bData.costo ? aData.order - bData.order : aData.costo - bData.costo;
  });
  $mazzo.append(items)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
  Add Item
</button>

<div id="mazzo">

  <div class="pick" id="1" data-costo="1" data-order="1">1</div>
  <div class="pick" id="3" data-costo="1" data-order="1">3</div>
  <div class="pick" id="0" data-costo="4" data-order="1">4</div>
  <div class="pick" id="2" data-costo="6" data-order="1">6</div>
</div>

如何使用data-attribute对动态添加的div进行排序，而无需使用相同的data-attribute重新组织现有的div

1 个答案: