samedi 20 avril 2019

How can I group elements based on their attributes in Jquery?

I'm currently trying to create a button that allows me to group options based on an attribute. Since I'm no jquery wiz, I took the existing and working button "Add-all" and started modifying it in order to add only the options with a certain attribute. The following code is that intent...

this.container.find(".remove-all").click(function() {
            that._populateLists(that.element.find('option').removeAttr('selected'));
            return false;
        });

        this.container.find(".add-all").click(function() {
            var options = that.element.find('option').not(":selected");
            if (that.availableList.children('li:hidden').length > 1) {
                that.availableList.children('li').each(function(i) {
                    if (jQuery(this).is(":visible")) jQuery(options[i-1]).attr('selected', 'selected'); 
                });
            } else {
                options.attr('selected', 'selected');
            }
            that._populateLists(that.element.find('option'));
            return false;
        });

        this.container.find(".add-auto").click(function() {
            var options = that.element.find('option').not(":selected");
            if (that.availableList.children('li:hidden').length > 1) {
                that.availableList.children('li').each(function(i) {
                    if (jQuery(this).is(":visible") && jQuery(this).has.class("auto")) jQuery(options[i-1]).attr('selected', 'selected');
                });
            } else {
                that.availableList.children('li').each(function (i) {
                    if (jQuery(this).has.class("auto")) jQuery(options[i-1]).attr('selected','selected');
                });
            }
            that._populateLists(that.element.find('option'));
            return false;
        });
    },

I'm currently using the has.class in order to look for the attribute that i want. In this case , auto. But it's not working. I'm trying to fix the code shown on top, in order to call the attribute "auto". the label = "'+ option.attr('class')+'" is the code that generates the lable = "auto" in html.

_getOptionNode: function(option) {
        option = jQuery(option);
        var node = jQuery('<li class="ui-state-default ui-element "  title="'+option.text()+'" data-selected-value="' + option.val() + '" label = "'+ option.attr('class')+'"  ><span class="ui-icon"/>'+option.text()+'<a href="#" class="action"><span class="ui-corner-all ui-icon"/></a></li>').hide();
        node.data('optionLink', option);
        return node;
    },




Aucun commentaire:

Enregistrer un commentaire