jQuery UI: sortable('toArray') returns an empty array

This has me stumped. The follow code returns ",,,,,,":

<script type="text/javascript">
$(function() {
    $('#listB').sortable({
        connectWith: '#listA',
        update: function(event, ui) {
            var result = $(this).sortable('toArray');
            alert(result);
            }
    });
    $('#listA').sortable({
        connectWith: '#listB'
    });
});
</script>

<div id="boxA">
    <ul id="listA" class="myList">
        <li value="1">Item A</li>
        <li value="2">Item B</li>
        <li value="3">Item C</li>
        <li value="4">Item D</li>
        <li value="5">Item E</li>
        <li value="6">Item F</li>
        <li value="7">Item G</li>
    </ul>
</div>

<div id="boxB">
    <ul id="listB" class="myList">
        <li value="1">Item A</li>
        <li value="2">Item B</li>
        <li value="3">Item C</li>
        <li value="4">Item D</li>
        <li value="5">Item E</li>
        <li value="6">Item F</li>
        <li value="7">Item G</li>
    </ul>
</div>

Why开发者_如何学Go?! It's driving me insane! Any suggestions?

You can define which attribute to fetch like this:

var result = $(this).sortable('toArray', {attribute: 'value'});

.sortable('toArray') serializes items Ids into array, and your items have no Ids, that's why you have empty strings.

I see a few purely javascript answers. They work but beware, they may not return the items in the order that is visible on the screen. Using the code below, see jtsalva above, will return the items in the proper sorted order. This had me stumped for a while because I wanted to save the new order to a database, so I could reload the grid where someone left off.

var result = $(this).sortable('toArray', {attribute: 'value'});

I was having this issue as well except i did have id's on my elements, jQuery's sortable('toArray') was very hit an miss on return the ids, however you can grab them in javascript using this:

function getSortOrder() {
    var children = document.getElementById('sortedElement').childNodes;
    var sort = "";
    for (x in children) {
        sort = sort + children[x].id + ",";
    }
    return sort;
}

This of course returns the ID's in a comma delimited string but you can return the array. I'm sure there's a better way to solve this problem, this is just the solution i found.

To use another attribute you can do this:

$('#element').sortable('toArray' {attribute: 'value'})

This will make it so it now uses the attribute 'value' from your code.

Documentation on Sortable toArray method

If serialize returns an empty string, make sure the id attributes include an underscore. They must be in the form: "set_number" For example, a 3 element list with id attributes "foo_1", "foo_5", "foo_2" will serialize to "foo[]=1&foo[]=5&foo[]=2". You can use an underscore, equal sign or hyphen to separate the set and number. For example "foo=1", "foo-1", and "foo_1" all serialize to "foo[]=1".

jq sortable reference

$('.sortable').sortable('toArray'); will only parse the first element of the class sortable. You can parse all elements by using each:

$('.sortable').each(function(){
    result.push($(this).sortable('toArray'));
})