javascript - 可排序新订单错误获取值 tkEmail

Question

我需要对 div 内具有相同 id 和 class 的项目进行排序。我在返回 tkEmail 标记的值时遇到问题。我无法获取该值。例子:项目 1订单:0 值(value):1

HTML:

<div id="sortable">
  <div class='sortear' tkEmail='1'>Item 1</div>
  <div class='sortear' tkEmail='2'>Item 2</div>
</div>

<br>

<div id="sortable">
  <div class='sortear' tkEmail='3'>Item 3</div>
  <div class='sortear' tkEmail='4'>Item 4</div>
</div>

JS:

$(document).ready(function () {
    $('div#sortable').sortable({
        update: function () { novaOrdem() },
    });
});

function novaOrdem(){
  $('div#sortable').each(function (i) {
    alert($(this).attr('tkEmail'))
  });
    }

Answer 1

Id 必须是唯一的，并且您实际上并没有在对 each 的调用中检查子 div。 $('div#sortable').children() 会给你你想要的。此外，tkEmail 无效，最好使用 data 属性，例如数据-tk-电子邮件:

HTML:

<div id="sortable">
  <div class='sortear' data-tk-email='1'>Item 1</div>
  <div class='sortear' data-tk-email='2'>Item 2</div>
  <div class='sortear' data-tk-email='3'>Item 3</div>
  <div class='sortear' data-tk-email='4'>Item 4</div>
</div>

JQuery:

$(document).ready(function() {
  $('div#sortable').sortable({
    update: function() {
      novaOrdem()
    },
  });
});

function novaOrdem() {
  var items = $('div#sortable').children();
  $.each(items, function() {
    alert($(this).html() + ', Order: ' + $(this).index() + ', Value: ' + $(this).data('tkEmail'))
  });
}

<强> Fiddle Demo