javascriptがli属性をループして項目ごとに値を変更する

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> 

その後、私は戻って1,2,3,4,5に対するLi項目の値を変更するには、私のJS機能をご希望のボタンをクリックします。その価値があることは注目に値する。私はリストがどのように以前のものに戻って戻っていくのかという解決策を探しているわけではない。

ありがとうございました。

Answer 1

これは（jQueryの1.4のように）動作するはずです：

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

Answer 2

私はあなたではなく、その内容よりも、リストの項目を並べ替えると思います。この方法では、liの属性/クラス/ ...のいずれかを失うことはありません。DOMの要素をそのまま維持して、ulの子の順序を変更するだけです。

私はちょっといいスニペットを見つけ、それを行うのです：

：

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); }); 

注：テストされていない - アイデアをつかみます。