Question

I am currently playing with the sortable interactions in jQuery. As for now, I added an unsorted list which is being displayed as a grid to my project. The source code is equivalent to the one I found in the jQuery demo section. I want the users to be able to display some values of a database, let them move each item to a position of their choice and send the changes back to the server. I implemented pretty much everything to do so, I however don’t know how to obtain a list of the items on the client side, after users sorted the list according to their needs.

My question is: How can I get an array of all items after the user has moved the items around? I attempted to access the list’s source code using something like this:

$( "#sortable" ).toArray()[0]

Which returns a HTMLUListElement object. The field innerText is undefined and innerHTML returns the source code of the entire unsorted list, I however would like to iterate through all the items of this list.

There has to be an easier way to access them. Any help would be appreciated.

Answer 1

$('#sortable li')

returns all the elements in your sortable.
If you want to display the values of them you can use

$('#sortable li').text()

which will print out all the text values of all the nodes in the right(sorted) order.

To access each of them separately you can use

$('#sortable li').eq(index)

or

$('#sortable li')[index]