Блог

У меня есть группа флажков, которые используются для фильтрации под названием $('.filters input') .

Я добавляю эти фильтры в массив:

   $('.filters input').each(function (counter, element) {
    if (element.checked) {
      $selectedFilters.push({
        name: element.name,
        class: element.value,
      });
    }
  })
  

В следующем разделе я объединяю элементы:

  if ($selectedFilters.length > 0) {
    $filters = $selectedFilters.map(function (elem) {
      return elem.class;
    }).join(', ');

    let $names = $selectedFilters.map(function (elem) {
      return elem.name;
    }).join(' ');
  

Затем я вывожу этот текст:

 $('.filter-box__applied-filters').html(`<div class="btn btn-primary">${$names}</div>`);
  

Но это добавляет каждый элемент массива в один и тот же div, как бы мне сделать так, чтобы каждый элемент отображался в новом div?

Поскольку $names — это массив, вам нужно выполнить цикл над $ names и добавить новый дочерний элемент к элементу $(‘.filter-box__applied-filters’), чтобы создать каждый фильтр отдельно в

 $names.each(function(filterName){
   $('.filter-box__applied-filters').append(`<div class="btn btn-primary">` filterName `</div>`);
})
  

документация jquery для .each