如何根据 Jquery 中的属性对元素进行分组？答案

【问题标题】：How can I group elements based on their attributes in Jquery?如何根据 Jquery 中的属性对元素进行分组？
【发布时间】：2019-09-10 10:17:51
【问题描述】：

我目前正在尝试创建一个按钮，该按钮允许我根据属性对选项进行分组。因为我不是 jquery wiz，所以我采用了现有的工作按钮“Add-all”并开始修改它，以便只添加具有特定属性的选项。下面的代码就是那个意图...

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

我目前正在使用 has.class 来查找我想要的属性。在这种情况下，自动。但它不起作用。我正在尝试修复顶部显示的代码，以便调用属性“auto”。 label = "'+ option.attr('class')+'" 是在 html 中生成 label = "auto" 的代码。

_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;
},

下面有一张显示用户界面的图片。当我检查 AUTO: 选项时，我有以下代码...

<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=""><span class="ui-helper-hidden"></span>AUTO: Car Dealers - New Cars (CARD_NEW)<a href="#" class="action"><span class="ui-corner-all ui-icon ui-icon-plus"></span></a></li>

我希望我的添加自动按钮能够将所有行业 =“自动”选项向左移动。

【问题讨论】：

你能提供一个最小/简单的js和html代码以及你想要实现的目标吗？
我可以问一下cmets的代码吗？
另外你为什么要隐藏一些示例数据？你真的在展示生产中的数据吗？

标签： php jquery html web multi-select

【解决方案1】：

我只是根据你的标题

来回答

var elements = $(document).find("[data-attribute]")

该代码将返回属性为"data-attribute"的所有元素

如果您想在特定位置（例如div#Header 内部）查找，只需更改document ...也可以将data-attribute 更改为您想要的，例如industry 或title 甚至data-selected-value

【讨论】：