jquery - jQuery 可排序更新行 id-s
问题描述
我有 jquery 可排序表:
<ul id="sortable">
<li class="ui-state-default 1" id="1">Item 1</li>
<li class="ui-state-default 2" id="2">Item 2</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
目前我可以直观地拖动它们来编辑它们的位置,但它们的 id-s 将保持与重新定位之前一样。
如何编辑代码,以便在重新定位行时,将根据 ID-s 数量增加的列表设置整个表的 id-s?
更新:序列号可以在 ID-s 中,也可以在类中。
解决方案
无需放置类或 id 来跟踪元素在 DOM 中的位置。他们作为列表子元素的位置就是他们的位置。
$(function() {
$("#sortable").sortable();
$("#sortable").disableSelection();
$('button').on('click', function(){
var $listItems = $('#sortable li');
// you can have just an array. The order of the array IS the order
console.log( $listItems.map(function(){ return this.innerHTML}).get() );
// if you want to make it more fancy, you can put the order in the array
console.log(
$listItems.map(function(index, element){
return { index: index, value: element.innerHTML };
}).get()
);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<ul id="sortable">
<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>
<button>Save</button>
推荐阅读
- html - 一旦我添加“透视:1px”,导航栏的位置就不再固定了。我该如何解决?
- git - Netbeans 与 Git 状态不匹配
- azure-data-factory - 如何使用 Azure 数据工厂和自托管运行时读取本地 csv 文件?
- html - 如何使用 asp.net mvc 制作下拉列表以访问 SelectItemList 上的数据?
- scala - 即使在增量编译中,SBT 1.3.8 也会自动更新 SNAPSHOT 版本
- c# - 对匿名类型调用 Equals 取决于创建对象的程序集
- java - 在 Java 中使用替换函数
- plugins - 编码 Minecraft 插件 (Jar)
- python - 如何在不使用 getpass() 的情况下在 python 中屏蔽或隐藏用户输入?
- terraform - Terraform 版本 12 ;1 个用于多个 amis 的 aws_instance 资源