Найти все элементы с заданным классом и значением данных, взять значение данных и добавить класс к другим элементам с соответствующим классом

#jquery

Вопрос:

Я использую плагин facetwp для WordPress для фильтрации сообщений. Каждый фасет выводит свои параметры с разметкой, подобной этой…

 <div class="facetwp-radio" data-value="blue"> ... </div>

При выборе опции добавляется class .checked .

Итак, на данной странице у меня может быть что-то вроде этого..

 <div class="facetwp-radio .checked" data-value="blue"> ... </div>
<div class="facetwp-radio" data-value="red"> ... </div>
<div class="facetwp-radio .checked" data-value="green"> ... </div>
<div class="facetwp-radio" data-value="brown"> ... </div>
<div class="facetwp-radio .checked" data-value="yellow"> ... </div>

Мне нужно перебрать все эти элементы, проверить те, у которых есть класс .checked , взять их значение данных и найти другие элементы на странице, у которых классы равны значению данных, и добавить к ним класс .checked .

У меня есть рабочий код для одного экземпляра..

     if ($('.facetwp-facet .checked[data-value="blue"]').length > 0) { 
    $('.blue').addClass('checked');
    } else {
    $( ".blue" ).removeClass( "checked" );
    }

Как я могу изменить этот код, чтобы динамически «перебирать» все возможные комбинации?

Ответ №1:

$('.facetwp-radio').each(...) для перебора всех элементов. Не обычная практика иметь точку внутри имени класса css.

Демонстрация на https://codepen.io/ProGu/pen/jOLqrZP

   $('.facetwp-radio').each(function() {
    if ($(this).hasClass('.checked')) {
      $('.'   $(this).data('value')).addClass('.checked');
    } else {
      $('.'   $(this).data('value')).removeClass('.checked');
    }
  });

Ответ №2:

Если я понимаю ваш вопрос, вы хотите перебрать набор всех проверенных радиостанций, а затем получить атрибут для каждого элемента в этом наборе. Затем вы пытаетесь найти все элементы, которые имеют эти значения в качестве класса.

 $(".facetwp-radio .checked").each(function() {
    var dv = $(this).attr("data-value");
    var classSelector = "."   dv;
    var elementList = $(classSelector);
    <Do whatever you want to do with that element set>
});