排序并再次选择后的元素顺序

Question

我有这个HTML：

<ul>  
   <li>a</li>
    <li>b</li>
</ul>

我申请：

$('ul').sortable() 

更改元素的顺序后，我可以在Chrome的Inspect Element中看到DOM更改，但在控制台或其他函数$('ul li')中选择已排序的元素会返回初始订单。 如何以新的顺序获取元素列表？

Answer 1

它工作正常，但你需要告诉jQuery发生了什么。所以例如在调用任何 sortable（）函数后，您应该询问li项的顺序。

举个例子：

$(function() {
    $( "#sortable" ).sortable({
      revert: true,
      start: function(evt, ui) {
          $('#log').html("");
      },
      stop: function(evt, ui) {
          //alert( $( "li" ).first().html() );
          $( "li" ).each(function( index ) {
              $('#log').append( $( this ).text() + " " );
          });
      }
    });
});

我循环遍历每个$("li")，并给出了正确的顺序。

结果见这个jsFiddle：

DEMO

---

您可以调用以下任何外部函数，而不是在stop:方法中编写所有函数。确保每次使用.sortable()功能时都要调用它。

$(function() {
    $( "#sortable" ).sortable({
      revert: true,
      stop: function(evt, ui) {
          myFunction();
      }
    });
});

function myFunction()
{
    $('li').each(function()
    {
        $(this).off();              // delete any previously defined function
        $(this).click(function()    // define a new function
        {
            alert('My position is: '+$("li").index( $(this) ));
        });
    });
}

当然，如果您的函数没有明确使用任何元素的索引，则不需要这样做。然后你可以只定义一次函数。

以下是jsFiddle演示中的最后一个代码：

DEMO 2

Answer 2

如果您使用Chrome的开发人员工具的元素部分（这非常方便），那么您可以在下面的li中看到更新元素列表排序后元素按降序排列：