Question

我想遍历一堆<li>元素并更新其中的值，并在文档中显示。

我这样做的原因是因为我想按顺序对元素列表进行排序。我在JQuery中使用Sortable来做到这一点。

<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>

订单可能会变成：

    <li> 3 </li>
    <li> 1 </li>
    <li> 4 </li>
    <li> 2 </li>
    <li> 5 </li>

然后单击一个按钮，我希望我的JS功能将li项的值更改回1,2,3,4,5。值得注意的是，我不是在寻找一种解决方案来恢复之前的清单。

感谢。

Answer 1

这应该有效（从jQuery 1.4开始）：

$('.your_list li').text(function (index) {
    return index + 1;
});

Answer 2

我认为您宁愿重新排序列表项而不是其内容。这样，你就不会丢失任何li的属性/类/ ...而且你可以保持DOM的元素不变，只改变某些ul个孩子的顺序。 / p>

我找到了一个很好的小片段做到了：

http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

你唯一需要做的就是记住初始订单

function mysortA( a, b ) {
   var compA = $(a).text().toUpperCase();
   var compB = $(b).text().toUpperCase();
   return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;    
}
function mysortB( a, b ) {
  return   a.originalindex < b.originalindex ? -1 
         : a.originalindex > b.originalindex ?  1 
         : 0;
}

你必须初始化：

var ul = $('ul');
var listitems = ul.children('li').get();

// remember original index
listitems.each( function(index, li){ li.originalindex=index; } );

然后你可以单向排序：

// sort them using your sort function
listitems.sort( mysort )
// rebuild the list container
listitems.each( function(idx, itm) { mylist.append(itm); });

然后退一步：

var ul=$('ul');
ul.children('li').get().sort(mysortB).each(function(i,li){ ul.append(li); });

注意：未经测试 - 抓住这个想法。

javascript循环遍历li属性并更改每个项目的值

2 个答案: