获取jquery可排序列表项的顺序

Question

我已经完成了这个http://jsbin.com/UBezOVA/1/edit.

当我单击提交按钮时,我想获取列表项的当前顺序.但是,似乎 $("#sortable2").sortable("toArray")没有显示列表的当前顺序(例如sortable2).如何获取列表的当前顺序.

Answer 1

您的部分问题是打字错误,省略了#jQuery选择器中的id.否则,您的使用.sortable("toArray")是正确的.(注意,我在console.log()那里使用而不是alert()- 观察浏览器的控制台以获得更好的输出)

function submit(){
   var idsInOrder = $("#sortable2").sortable("toArray");
   //-----------------^^^^
   console.log(idsInOrder);
}

但是,如文档所述,该toArray()方法id在序列化时将默认使用可排序项的属性.您需要为id每个可排序项添加一个唯一属性才能使其工作:

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight" id='i1'>Item 1</li>
  <li class="ui-state-highlight" id='i2'>Item 2</li>
  <li class="ui-state-highlight" id='i3'>Item 3</li>
  <li class="ui-state-highlight" id='i4'>Item 4</li>
  <li class="ui-state-highlight" id='i5'>Item 5</li>
</ul>

将这两者放在一起,它将按预期工作:http://jsbin.com/UBezOVA/6/edit

Answer 2

的文件指定者的Soratble [点击这里]清楚地说,这Serializes the sortable's item id's into an array of string.

这意味着,您应该使用每个都带有id的可排序元素

<ul id="sortable2" class="connectedSortable">
  <li id="1" class="ui-state-highlight">Item 1</li>
  <li id="2" class="ui-state-highlight">Item 2</li>
  <li id="3" class="ui-state-highlight">Item 3</li>
  <li id="4" class="ui-state-highlight">Item 4</li>
  <li id="5" class="ui-state-highlight">Item 5</li>

现在你的代码var idsInOrder = $("#sortable2").sortable('toArray'); alert(idsInOrder);肯定会输出一个数组.

Answer 3

gaurav 走在正确的轨道上，但正如purefusion提到的“id 属性总是应该以字母字符开头”

因此，html有效的方法是添加数据属性

var idsInOrder = $("#sortable2").sortable('toArray', {attribute: 'data-id'});

var idsInOrder = $("#sortable2").sortable('toArray', {attribute: 'data-id'});

$(document).ready(function() {

  var idsInOrder = $("#sortable2").sortable('toArray', {
    attribute: 'data-id'
  });


  alert(idsInOrder);

});