Question

我正在使用jQuery UI进行排序，以便对菜单进行排序。

我正在尝试将列表项的id设置为其当前位置或索引，以便稍后我可以在我的数据库中更新它们的位置值。但是，当我使用firebug检查html输出时，id不会更改为索引值。

因此，例如，如果我在li.home前面拖动li.news，它的id应该更改为0并且home的id为1。

HTML：

<ul id="menu" class="sortable editable">
<li class="home" id="0">
<a href="index.php?page=home">home &raquo;</a>
</li>
<li class="news" id="1">
<a href="index.php?page=news">news &raquo;</a>
</li>
<li class="about us" id="2">
<a href="index.php?page=about-us">about us &raquo;</a>
</li>
</ul>

的jQuery

$('.sortable > li').each(function() {
     var index = $(this).index();
     $(this).attr('id', index);
});

关于如何将id设置为当前位置的任何想法？

Answer 1

试试这个

$('.sortable > li').each(function( index, value ) {
     $(this).attr('id', 'item_'+index);
});

Answer 2

首先，除非您假设HTML5基线，否则以数字开头的ID尚未生效。行为将是不可预测的。如果你绝对不得不使用这种方法，我会允许ID对应一些适当的唯一自然键，然后使用jQuery的data()函数将信息附加到每一行。

$('.sortable > li').each( function( i,v ) {
  $(this).data('sort-position',i);
});

要检索：

$('li#something').data('sort-position');

但更重要的是，我没有理由将状态信息转移到DOM中;它会造成一个糟糕的数据库，并暴露出该状态表示与物理排序不同步的风险。为什么不允许重新排序过程，当您想要更新后端数据库时，直接使用每个元素的索引？

使用jQuery sortable根据它的当前位置更改列表项ID

2 个答案: