我有一个填充的无序列表,用户可以将 li 拖到未填充的列表中。
<ul id="sortable1" class="connectedSortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li></li>
</ul>
我想要做的是让未填充的列表成为有序列表,它显示添加元素的位置,并在用户对有序列表中的元素进行排序时更新位置。我正在考虑使用这样的东西:
<ul id="sortable1" class="connectedSortable">
<li><span> </span>Item 1</li>
<li><span> </span>Item 2</li>
<li><span> </span>Item 3</li>
<li><span> </span>Item 4</li>
<li><span> </span>Item 5</li>
</ul>
然后,当用户将元素移动到新列表时,用元素的数字位置填充空的 span 标记,但我不知道这是否是最有效的方法。
最佳答案
您可以使用text
方法:
$('#sortable1 span').text(function(i){
return ++i
})
或者创建一个 jQuery 方法并在更新事件上调用它:
$.fn.populate = function(){
this.each(function(i){
this.innerHTML = ++i;
})
}
$("#sortable1").sortable({
update: function( event, ui ) {
$('#sortable1 span').populate();
}
});
关于jquery无序列表转有序列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13655254/