javascript - 怎么获得将 HTML 中的项目及其索引放入 JavaScript 数组？

Question

我使用 Sortable jQuery 制作了一个重新排序列表。重新排序后，我想获得新的 LI 项目订单。我怎样才能做到这一点？

<li id="A1" class="ui-state-default">Item 2</li>
  <li id="A2" class="ui-state-default">Item 3</li>
  <li id="A3" class="ui-state-default">Item 4</li>
  <li id="A4" class="ui-state-default">Item 5</li>

Answer 1

这将为您提供一个包含每个 li 的 ID 和索引的对象数组：

var order = $('li').map(function(i) { 
    return { id: this.id, index: i };
}).get();

示例 - http://jsfiddle.net/czprf/

Answer 2

使用 jQuery 选择它们将使它们以新的顺序排列：

var myLis = $('.ui-state-default');

myLis.eq(0).html(); // This will return Item 2
myLis.eq(1).html(); // This will return Item 3
myLis.eq(2).html(); // This will return Item 4
myLis.eq(3).html(); // This will return Item 5

jQuery 总是首先选择最接近 DOM 顶部的元素。

Answer 3

试试这样：

<ul id="AAA">
  <li id="A1" class="ui-state-default">Item 2</li>
  <li id="A2" class="ui-state-default">Item 3</li>
  <li id="A3" class="ui-state-default">Item 4</li>
</ul>

JS：

var nodeList = Array.prototype.slice.call( document.getElementById('AAA').children ),
      liRef = document.getElementsByClassName('match')[0];    
console.log( nodeList.indexOf( liRef ) );

Answer 4

您想要的是访问stop可排序插件的事件。

var order;
$('#sortable').sortable({
    stop: function(){
        order = $('#sortable li').map(function(i, li){
            return {index: i, id: li.id, text: li.innerHTML};
        });
        console.log(order);
    }
});

这是你的 jsFiddle；