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

Get the order of list item in jquery sortable

本文关键字：顺序 列表 jquery 排序 获取      更新时间：2023-09-26

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

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

您的部分问题是印刷错误，省略了 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

Gaurav走在正确的轨道上，但正如Purefusion提到的"ID属性总是应该以字母字符开头"

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

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


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

  console.log(idsInOrder);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

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

toArray of 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);肯定会输出一个数组。

JS ：

 $(function() {
     $( "#sortable1, #sortable2" ).sortable({
         connectWith: ".connectedSortable"
     }).disableSelection();
 });
 function submit(){
     var idsInOrder = [];
     $("ul#sortable1 li").each(function() { idsInOrder.push($(this).text()) });
     alert(idsInOrder.join(''n'));
 }

.HTML： 

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Sortable - Connect lists</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
      #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float:left; margin-right: 10px; }
      #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em;width: 120px; }
  </style>
  <script>
  </script>
</head>
<body>
    <ul id="sortable1" class="connectedSortable">
      <li class="ui-state-default">Item 1</li>
      <li class="ui-state-default">Item 2</li>
      <li class="ui-state-default">Item 3</li>
      <li class="ui-state-default">Item 4</li>
      <li class="ui-state-default">Item 5</li>
    </ul>
    <ul id="sortable2" class="connectedSortable">
      <li class="ui-state-highlight">Item 1</li>
      <li class="ui-state-highlight">Item 2</li>
      <li class="ui-state-highlight">Item 3</li>
      <li class="ui-state-highlight">Item 4</li>
      <li class="ui-state-highlight">Item 5</li>
    </ul>
    <input type="submit" value="Submit" onclick="submit()">
</body>
</html>

这应该有助于按当前顺序显示项目。

在这里查看最终输出：http://jsbin.com/UBezOVA/21/edit

  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
  function submit(){
   var idsInOrder = $("#sortable").sortable("toArray");
   alert(idsInOrder);
}
 
<ul id="sortable">
  <li class="ui-state-default" id='1'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default" id='2'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default" id='3'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default" id='4'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default" id='5'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default" id='6'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default" id='7'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
 <input type="button" id="btnSubmit" value="Submit" onclick="submit()">

相关文章：