Javascript 如何在拖放Jquery UI上更改数据属性？

我制作了一个jQuery函数，用户可以在其中拖放div。但我想在用户拖放它们时更改它们的数据属性，例如-

<div data-num="1">one</div>
<div data-num="2">Two</div>
<div data-num="3">Three</div>
<div data-num="4">Four</div>

---

为了实现您的目标，您可以将事件处理程序挂接到可排序表的

stop

事件。然后，您可以遍历

#app

中的每个子

div

，并更新

数据num

，以匹配元素的索引。试试这个：

jQuery（$=>{
$（“#应用程序”）。可排序({
停止：（）=>{
$（'#app>div'）。每个（（i，el）=>$（el.data（'num'，i+1））；
}
});
//仅用于测试。。。
$（'button'）。在（'click'，（）=>{
$（'#app>div'）。每个（（i，el）=>console.log（`${el.textContent}-${$（el.data（'num'）}'））；
});
});

一个
两个
三
四
测试
我们也可以通过使用项目索引来实现这一点

jQuery("#app").sortable({
   update: function(e, ui) {
       jQuery("#app div").each(function(i, elm) {
           $elm = jQuery(elm);
           var elindex = $elm.index("#app div");
           $elm.attr("data-num", elindex+1);
       });
    }   
});

感谢您的帮助，它正在更改控制台中的值，但根本不更改数据属性。这是正确的行为。jQuery只更改内存中的数据属性。只要您总是使用
data（）
来获取/设置值（并且永远不要使用
attr（）
）-这是更好的做法，那么代码就可以正常工作
jQuery("#app").sortable({
   update: function(e, ui) {
       jQuery("#app div").each(function(i, elm) {
           $elm = jQuery(elm);
           var elindex = $elm.index("#app div");
           $elm.attr("data-num", elindex+1);
       });
    }   
});