jQuery区分多个相同的选择器实例

时间:2011-11-21 17:43:56

标签: jquery jquery-selectors

我有一个这样的选择器:

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

用于jQueryUI的可排序插件。

页面上有多个可排序列表。所以每个人都被选中,虽然实际上只显示了1个,但其他人在课程崩溃时崩溃了。

当拖动之后偶数点火时,我得到第一个ul的排序顺序,即使我正在排序最后一个。

当我在函数中稍后实际处理排序时,如何选择特定的ul:not(.collapsed)?目前它看起来像这样:

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

编辑:

以下是我们在页面加载时的内容:

$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最终只是执行上面的代码片段来获取订单并将ajax传递给控制器​​..

如果我更改上面的选择器,所有ul都没有应用ui-plugin并且无法排序。所以我想如果有一种方法可以将它与sort_tree函数区分开来,我可以正确地进行。

以下是我正在使用的排序树功能:

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 );
        }
    });

1 个答案:

答案 0 :(得分:2)

对不起,你的问题有点难以理解,所以我不得不猜一点。

页面上有几个ul,你可以对它们进行排序,并确保只有一个可见。在以后的某个时间点,您想要请求可见UL的排序顺序。我想第一次尝试获得可见的UL就是这样:

$('ul.sortable:visible')

您可以从中请求排序顺序。 但是如果你处理这种排序,你可能知道其中一个是ul的孩子。所以你也可以去

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

其中li是要排序的元素之一,这也应该是你的根元素。不确定如果你使用拖放是否可行。也许可排序的东西本身提供了第三种方法(这可能在排序方法中?)。