Jquery：widget：在循环中访问ul的li

Question

我无法弄清楚我在过滤器中做错了什么：我的小部件的功能部分。它应该使用“Selected”类值循环div中“ul”的所有“li”。

(function ($) {

$.widget(".multiselect", {
    _create: function () {
        this.element.hide();
        this.count = 0; // number of currently selected options
        this.id = this.element.attr("id");
        this.container = $('<select class="selectedValues" multiple="multiple"></select>').insertAfter(this.element);
        this.availableContainer = $('<div class="UnSelected"></div>').insertAfter(this.element);
        this.selectedContainer = $('<div class="Selected"></div>').insertAfter(this.element);
        this.availableActions = $('<div class="head"><div><input class="UnSelectedfilter" type="text" value="" /></div><div class="addAll"><a>Add all</a></div></div>').appendTo(this.availableContainer);
        this.selectedActions = $('<div class="head"><div><span class="SelectedCounter">0</span> selected items</div><div class="removeAll"><a>Remove all</a></div></div>').appendTo(this.selectedContainer);
        this.availableList = $('<ul></ul>').bind('selectstart', function () { return false; }).appendTo(this.availableContainer);
        this.selectedList = $('<ul></ul>').bind('selectstart', function () { return false; }).appendTo(this.selectedContainer);

        var that = this;

        // _init is called automatically

    },
    _init: function () {
        this.count = 0;
        var that = this;
        // Loop the given select element's options
        $("#" + this.id + " option").each(
            function () {
                if ($(this).attr("selected") == "selected") {
                    that._addToUlList(".Selected ul", $(this).attr("class"), $(this).attr("value"), $(this).text());
                    that._addInSelectedValues($(this).attr("value"));
                    that.count += 1;
                };
                that._addToUlList(".UnSelected ul", $(this).attr("class"), $(this).attr("value"), $(this).text());
            }
        );
        // Update the selected item counter
        that._updateSelectedItemsCounter();
        that.availableActions.find(".UnSelectedfilter").bind("change", { list : that.availableContainer }, that._filter);
        // Drag binding with 'stop' event handler
        $(function () {
            $(".Selected ul").sortable({
                opacity: 0.6,
                axis: "y",
                containment: ".Selected ul",
                cursor: 'n-resize',
                stop: function (event, ui) {
                    // Remove all options
                    $("#" + this.id + " option").remove();
                    // Loop all options in the select element
                    $(".Selected ul li").each(function () {
                        // Add it back
                        addInSelectedValues($(this).attr("id"));
                    });
                }
            });
        });

    },
    // Add li in specified list
    _addToUlList: function (ulLocator, classValue, idValue, text) {
        var classAttr = (classValue != undefined) ? " class=\"" + classValue + "\"" : "";
        $(ulLocator).append("<li id=\"" + idValue + "\"" + classAttr + ">" + text + "<a></a></li>");
    },
    _addInSelectedValues: function (value) {
        $(".selectedValues").append("<option value=\"" + value + "\" selected=\"selected\">element value=" + value + "</option>");
        this._updateSelectedItemsCounter();
    },
    _updateSelectedItemsCounter: function () {
        this.selectedContainer.find(".SelectedCounter").text(this.selectedContainer.find("li").length);
    },
    _filter: function (event) {
        var input = $(this);
        var that = this;
        event.data.list.find("li").each(
            function (i) {
                if (this.text().toLowerCase().indexOf(input.val().toLowerCase()) < 0) {
                    this.hide();
                }
                else {
                    this.show();
                }
            }
        );
    },
    destroy: function () {
        this.element.show();
        this.container.remove();

        $.Widget.prototype.destroy.apply(this, arguments);
    }
});
})(jQuery);