jQuery排序中的自定义数据？答案

【问题标题】：Custom data in jQuery sortable?jQuery排序中的自定义数据？
【发布时间】：2012-01-05 19:15:54
【问题描述】：

在“更新”回调中，您可以使用$(this).sortable('toArray'); 获取元素的顺序

但此订单包含元素 ID。

如何获取自定义属性，例如data-myattr？我希望该订单包含来自此属性的值而不是 ID....

   $('ul').sortable({
     handle: 'h2'
     items: 'li',
     context: this,
     update: function(){        

       var order = $(this).sortable('toArray');

       // here I want a array of values from my attribute, not ID values...
       alert(order);

       ....

     }
   });

HTML 很简单：

<ul>
  <li data-myattr="a-1" id="whatever">
    ...
  </li>
  ...

【问题讨论】：

这应该是一个 jQuery UI 功能请求...
好的，我看了代码，现在已经实现了！请在下面为我的答案投票。

标签： javascript jquery jquery-ui-sortable

【解决方案1】：

$("li").data("myattr") // if you use jQuery, >= 1.4.3

$("li").attr("data-myattr") // for erlier

JS 小提琴here

【讨论】：

@Alper 我真的希望你永远不要再推荐data 使用......正如你在这个单元测试中看到的那样（jsperf.com/jquery-data-vs-jqueryselection-data/8）数据很慢......使用道具因为它更快（或者更快的原生js）。

【解决方案2】：

$("ul").sortable({
  .
  .
  .
  update: function(event, ui) {        
    var arr = $(this).sortable('toArray');
    var i, n;
    var attrs = [];
    for (i = 0, n = arr.length; i < n; i++) {
      attrs.push($('#' + arr[i]).data('myattr'));
    }

    alert(attrs);  
  }
});

【讨论】：

我认为我的 JSBin 脚本中有一个虚拟元素 - 我已将其删除。
唯一的缺点是，如果元素上没有 ID 属性，这将不起作用:)

【解决方案3】：

截至 12 年 8 月，这是直接在 jQuery UI 中实现的：

var order = $(this).sortable('toArray', {attribute: 'data-myattr'});

【讨论】：