jQuery UIはULエレメントのソートされた位置を取得します

Question

私はjQuery UIのソート可能なULリストを使用しています。ユーザーがリストを並べ替えるたびに、各li要素がそのリストの「position」属性を更新するようにします。

<ul> 
<li position="1">a</li> 
<li position="2">b</li> 
<li position="3">c</li> 
</ul> 

したがって、ユーザーがcとaを交換すると、その位置も更新されます。私は.eachを使用しようとしましたが、javascriptはLI要素がどのように表示されるかの順序に従わず、要素の作成順序に従っているようです。

Answer 1

:eqセレクタまたはindexメソッドを試しましたか？ 。あなたはそのような位置を見つけることができますの位置を見つけるためにしようとしているどの李要素を知っている提供：

<ul> 
<li id="c">c</li> 
<li id="b">b</li> 
<li id="a">a</li> 
</ul> 

VAR位置= $（ 'のli＃b' を）インデックス（）;

Answer 2

あなたはソート可能「更新」イベントを利用したいと思う：

$("ul").sortable({ 
    update: function(event, ui) { 
    var order = $(this).sortable('serialize'); 
    console.info(order); 
    } 
}); 

あなたはその後、アイテムの更新順序を引っ張って、「シリアル化」の方法を使用することができます。仕事へのこの一つの要件は、あなたがあなたのHTMLを更新したいと思いますので、各リスト項目のIDは、アンダースコアが含まれていることをされています。別の答えで述べたように

<ul> 
    <li id="position_1">a</li> 
    <li id="position_2">b</li> 
    <li id="position_3">c</li> 
</ul> 

Answer 3

、updateを使用すると、あなたが必要とするすべてである：

$(function() { 
    var $sortable = $('ul').sortable({ 
     update: function(event, ui) { 
      var counter = 1; 
      $('li', $sortable).each(function() { 
       $(this).attr('position', counter); 
       counter++; 
      }); 
     } 
    }); 
}); 

Example link