Как я могу сгруппировать элементы на основе их атрибутов в Jquery? - PullRequest
1 голос
/ 20 апреля 2019

В настоящее время я пытаюсь создать кнопку, которая позволяет мне группировать параметры на основе атрибута. Поскольку я не являюсь мастером jquery, я взял существующую и работающую кнопку «Добавить все» и начал ее модифицировать, чтобы добавить только параметры с определенным атрибутом. Следующий код - это намерение ...

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')+'" - это код, который генерирует lable = "auto" в 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;
},

Ниже приведено изображение, показывающее пользовательский интерфейс. Когда я проверяю параметр 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>

User Interface

Я хочу, чтобы кнопка «Добавить авто» могла перемещать все параметры промышленности = «авто» влево.

1 Ответ

0 голосов
/ 20 апреля 2019

Я просто собираюсь основывать мой ответ на вашем Заголовке

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

, который код вернет всем элементам с атрибутом "data-attribute"

просто измените document, если вы хотите найти в определенных местах, таких как div#Header ... также измените data-attribute на то, что вы хотите, например industry или title или даже data-selected-value

...