I made a reorder list using Sortable jQuery. After the reorder, I want to get the new Order of LI Items. How can I achieve this?
<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>
This will give you an array of objects containing the ID and index of each li:
var order = $('li').map(function(i) {
return { id: this.id, index: i };
}).get();
Example - http://jsfiddle.net/czprf/
Selecting them with jQuery will get them in their new order:
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 always selects the elements closest to the top of the DOM first.
each: myLis.each(function(index) {...try like this:
<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 ) );
What you want is to access the stop event of the sortable plugin.
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);
}
});
.index()? It works just fine to return the actual index of element based by its id.