获取类中元素的特定属性的当前顺序作为jquery-ui排序中的数组

Posted 2023-05-08

【中文标题】获取类中元素的特定属性的当前顺序作为jquery-ui排序中的数组

【英文标题】：Get the current order of specific attribute of elements in class as array in jquery-ui sortable

【发布时间】：2019-10-15 23:44:39

【问题描述】：

我正在尝试在 jquery-ui 可排序中获取有序元素的属性数组。

下面是我试过的代码

$(".topic_keywords").sortable();

$(".box-item").draggable();    

var keywordOrder = $(".topic_keywords").sortable("toArray", attribute: 'data-id');

console.log(keywordOrder);

这里是元素

<ul class="topic_keywords" data-id="1">
      <li class="box-item" data-id="1">Item 1</li>
      <li class="box-item" data-id="2">Item 2</li>
</ul>
<ul class="topic_keywords" data-id="2">
    <li class="box-item" data-id="3">Item 3</li>
    <li class="box-item" data-id="4">Item 4</li>
</ul>

但是，我只得到第一个可排序类的有序数组。如何从当前正在对其元素进行排序的任何类中获取数组？

【参考方案1】：

要获取当前正在排序的项目的顺序，我建议使用update event。

更新（事件，用户界面） 当用户停止排序且 DOM 位置发生变化时触发此事件。

这是一个演示：

$(".topic_keywords").sortable(

  update: function(event, ui) 

    var keywordOrder = $(this).sortable("toArray", 
      attribute: 'data-id'
    );

    console.log(keywordOrder);

  

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<ul class="topic_keywords" data-id="1">
  <li class="box-item" data-id="1">Item 1</li>
  <li class="box-item" data-id="2">Item 2</li>
</ul>
<ul class="topic_keywords" data-id="2">
  <li class="box-item" data-id="3">Item 3</li>
  <li class="box-item" data-id="4">Item 4</li>
</ul>

【讨论】：

无论如何我可以访问可排序声明之外的“keywordOrder”变量？