title: How can I group elements based on their attributes in Jquery?
body: <p>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...</p>
  
  <pre><code>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 &gt; 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 &gt; 1) {
      that.availableList.children('li').each(function(i) {
        if (jQuery(this).is(":visible") &amp;&amp; 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;
  });
  },
  </code></pre>
  
  <p>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 <code>label = "'+ option.attr('class')+'"</code> is the code that generates the lable = "auto" in html.</p>
  
  <pre><code>_getOptionNode: function(option) {
    option = jQuery(option);
    var node = jQuery('&lt;li class="ui-state-default ui-element "  title="' + option.text() + '" data-selected-value="' + option.val() + '" label = "' + option.attr('class') + '"  &gt;&lt;span class="ui-icon"/&gt;' + option.text() + '&lt;a href="#" class="action"&gt;&lt;span class="ui-corner-all ui-icon"/&gt;&lt;/a&gt;&lt;/li&gt;').hide();
    node.data('optionLink', option);
    return node;
  },
  </code></pre>
  
  <p>Below there is an image that shows the user interface. When I inspect the AUTO: option , i have the following code...</p>
  
  <pre><code>&lt;li class="ui-state-default ui-element  ui-draggable ui-draggable-handle" title="AUTO: Car Dealers - New Cars (CARD_NEW)" data-selected-value="82" industry="auto'" style=""&gt;&lt;span class="ui-helper-hidden"&gt;&lt;/span&gt;AUTO: Car Dealers - New Cars (CARD_NEW)&lt;a href="#" class="action"&gt;&lt;span class="ui-corner-all ui-icon ui-icon-plus"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/yefSw.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yefSw.jpg" alt="User Interface"></a></p>
  
  <p>I want my Add auto button to be able to move all industry = "auto" options to the left.</p>