Question

I have a selector like this:

$list = $('ul.sortable');

for jQueryUI’s sortable plugin.

There are multiple sortable lists on the page. So each one is chosen though only 1 at a time is actually shown, the others are collapsed with class collapsed.

When the even fires later on after dragging, I get the sort order of the first ul even though Im sorting the last one.

How can I, when I actually process the sort later in a function, pick out the particular ul that is :not(.collapsed)? Currently it looks like this:

$order = $item_list.nestedSortable('toHierarchy');

Edit:

Here is what we have on page load:

$item_list      = $('ul.sortable');
$url            = 'admin/navigation/order'; // CI Controller to process stuff
$cookie     = 'open_links';
$data_callback  = function(event, ui) {
  // Grab the group id so we can update the right links
  return { 'group' : ui.item.parents('section.box').attr('rel') };
}

// Do sort
sort_tree($item_list, $url, $cookie, $data_callback);

sort_tree eventually just does the above snippet to get the order and passes ajax to the controller..

If I change the selector above, all ul’s don’t get the ui-plugin applied and can’t be sorted. So I figure if there is a way to distinguish this from inside the sort_tree function I can get it going correctly.

Here is the sort tree function I am working with:

sort_tree = function($item_list, $url, $cookie, data_callback, post_sort_callback)
{
    // collapse all ordered lists but the top level
    $item_list.find('ul').children().hide();

    // this gets ran again after drop
    var refresh_tree = function() {

        // add the minus icon to all parent items that now have visible children
        $item_list.parent().find('ul li:has(li:visible)').removeClass().addClass('minus');

        // add the plus icon to all parent items with hidden children
        $item_list.parent().find('ul li:has(li:hidden)').removeClass().addClass('plus');

        // remove the class if the child was removed
        $item_list.parent().find('ul li:not(:has(ul))').removeClass();

        // call the post sort callback
        post_sort_callback && post_sort_callback();
    }
    refresh_tree();

    // set the icons properly on parents restored from cookie
    $($.cookie($cookie)).has('ul').toggleClass('minus plus');

    // show the parents that were open on last visit
    $($.cookie($cookie)).children('ul').children().show();

    // show/hide the children when clicking on an <li>
    $item_list.find('li').live('click', function()
    {
        $(this).children('ul').children().slideToggle('fast');

        $(this).has('ul').toggleClass('minus plus');

        var items = [];

        // get all of the open parents
        $item_list.find('li.minus:visible').each(function(){ items.push('#' + this.id) });

        // save open parents in the cookie
        $.cookie($cookie, items.join(', '), { expires: 1 });

         return false;
    });

    $item_list.nestedSortable({
        disableNesting: 'no-nest',
        forcePlaceholderSize: true,
        handle: 'div',
        helper: 'clone',
        items: 'li',
        opacity: .4,
        placeholder: 'placeholder',
        tabSize: 25,
        listType: 'ul',
        tolerance: 'pointer',
        toleranceElement: '> div',
        stop: function(event, ui) {

            post = {};
            // create the array using the toHierarchy method
            post.order = $item_list.nestedSortable('toHierarchy');

            // pass to third-party devs and let them return data to send along
            if (data_callback) {
                post.data = data_callback(event, ui);
            }

            // refresh the tree icons - needs a timeout to allow nestedSort
            // to remove unused elements before we check for their existence
            setTimeout(refresh_tree, 5);

            $.post(SITE_URL + $url, post );
        }
    });

Answer 1

Sorry, your question is kinda hard to understand, so I’ll have to guess a little.

You have several ul’s on a page, and you made them all sortable and made sure only one is visible. At a later point in time, you’d like to request the sort order of the visible UL. I guess the first attempt to get the visible UL would be this:

$('ul.sortable:visible')

From which you can request the sort order.
But if you process the sort, you probably know one of the li’s that is a child of the ul. So you could also go for

$(li).closest('ul.sortable');

in which li is one of the elements to sort, and this should get you the root element too. Not sure whether that works if you’re using drag-and-drop though. And probably the sortable thing itself offers a third method (this in the sort-method maybe?).