Question

我有一组用于过滤的复选框，称为$('.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中？

Answer 1

由于$ names是一个数组，因此您必须遍历$ names并将新的子项附加到$（'。filter-box__applied-filters'）元素中，才能分别在其中创建每个过滤器

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

jquery documentation for .each

我可以在数组元素周围包装类吗？

1 个答案: