同位素：将div添加到选定的项目

Question

我正在使用同位素布局对页面上的元素进行过滤，这可以成功使用多个复选框。

如您所见，我已经能够获得结果计数并转储所选过滤器的值。

但是我很困惑，因为我想将每个选定的过滤器包装在一个类中，这样它们不仅是带有.class的字符串

这是我的剧本：

// Selected filters
let $filters = $('.filters input');
let $resultCount = $('.filter-box__result-count');

// Inititialize Isotope
const $grid = $('#grid').isotope({
  itemSelector: '.grid-item',
  percentagePosition: true,
  animationEngine: 'best-available', //CSS3 if browser supports it, jQuery otherwise
  animationOptions: {
    duration: 800,
  },
  filter: '*',
  masonry: {
    columnWidth: '.grid-item',
    gutter: 30,
  },
})

// The items in the Isotope grid
const $items = $grid.data('isotope');

/**
 * Each time an image is loaded, re-layout the grid.
 * This prevents any weird overlapping.
 */
$grid.imagesLoaded().progress(function () {
  $grid.isotope('layout');
});

/**
 * A change event for the category toggler so we can tell the script to add the div containing categories
 */
$('.toggler--category input').change(function () {
  if ($(this).is(':checked')) {
    $('.toggler--tag').addClass('filter-box__toggler--disabled');
    $('.filter-box__categories').show();
  } else {
    $('.toggler--tag').removeClass('filter-box__toggler--disabled');
    $('.filter-box__categories').hide();
  }
})

/**
 * A change event for the tag toggler so we can tell the script to add the div containing tags
 */
$('.toggler--tag input').change(function () {
  if ($(this).is(':checked')) {
    $('.toggler--category').addClass('filter-box__toggler--disabled');
    $('.filter-box__tags').show();
  } else {
    $('.toggler--category').removeClass('filter-box__toggler--disabled');
    $('.filter-box__tags').hide();
  }
})

/**
 * Apply filters to Isotope when any filters are updated.
 * This will also update the result count and add some block elements.
 */
$filters.change(function () {

  // An empty array to contain filters
  let $selectedFilters = [];
  let $filterName = [];

  // Loop through filters and add values if checked
  $('.filters input').each(function (counter, element) {
    if (element.checked) {
      $selectedFilters.push(element.value);
      $filterName.push(element.name);

      // Log values for debugging
      console.log($selectedFilters);
      console.log($filterName);
    }
  })

  // If there are filters in the filters array, join them
  if ($selectedFilters.length > 0) {
    // let $tagContainer = $('<span class="tag-list__tag"></span>');

    $filters = $selectedFilters.join(', ');

    $('.filter-box__applied-filters-area').show();
    $('.filter-box__applied-filters').append($filters);
    $('.filter-box__applied-filters').text($filters);
  } else {
    $filters = '*';
    $('.filter-box__applied-filters-area').hide();
  }

  // Apply filters
  $grid.isotope({
    filter: $filters,
  })

  updateFilterCount();

});

/**
 * Reset all filtering
 */
$('.filter-box__reset-filter').click(function () {

  // Tell Isotope to display everything
  $grid.isotope({
    filter: '*',
  })

  // Hide added divs
  $('.filters').hide();
  $('.filter-box__applied-filters-area').hide();

  // Uncheck all checkboxes
  $('.filter-box__toggler').removeClass('filter-box__toggler--disabled');
  $('.filter-box__toggler input').prop('checked', false);
  $('.filters input').prop('checked', false);

  updateFilterCount();
});

/**
 * Update the count of returned items from Isotope
 */
function updateFilterCount() {
  $resultCount.text($items.filteredItems.length + ' Results');
}

上面的某些内容只是用来隐藏或显示不同点的div，但是无论如何，我都有一个名为tag的类，我想将每个选定的过滤器包装起来。

是否可以拆分过滤器数组并用类包装每个字符串？