jquery - 如何查找具有多个特定类的 div答案

【问题标题】：jquery - How to find divs that have multiple specific classesjquery - 如何查找具有多个特定类的 div
【发布时间】：2021-12-16 11:10:27
【问题描述】：

我有一个页面，其中包含从 csv 文件生成的部分（在 Jekyll 中，使用液体）。在本节中，我有带有图像和描述的单个 div。我需要找到适合特定描述的每个 div。

<div class="row">
  {% for item in site.data.items %}
    <div class="col-md-3 item {{ item.test }} {{ item.industry }} {{ item.shape }}">
      <img src="source here">
      <br/>
      <p>{{ item.name }}</p>
      <p>{{ item.description }}</p>
    </div>
  {% endfor %}
</div>

我为每个 div 分配了类，并从 csv 中提取了这些类。这会生成一个类似于“item sticky food pasta”的类名。

现在我想在用户选择页面上的选项时过滤显示的项目。我创建了一个数组，selectedOptions：

var selectedOptions = [];

隐藏其他项目：

$(".item").hide();

将选中的选项推送到数组中：

$('input[name="filter-input"]:checked').each(function(i){
  selectedOptions.push($(this).val());
});

然后遍历选项以仅显示选择了类的项目：

for (var i = 0; i < selectedOptions.length; i++) {
  $('.item').each(function() {
    if ($(this).hasClass(selectedOptions[i])){          
      $(this).show();;
    }
  });
}

如果我想要每个具有任何类的项目，这很有效。但是，我想要的是一种累积效应：我只想要同时具有食物和面食类的物品。

如何显示具有所有类的每个项目？我知道我可以使用 $('.classa.classb') 之类的东西，但我不确定如何将它与这里的数组一起使用。

谢谢！

【问题讨论】：

“但我不确定如何将它与我在这里的数组一起使用” - 如果您没有任何需要转义才能使用的类名在 CSS 选择器中，您可以简单地 join 数组元素之间加一个点，然后在结果前面再放一个点 ...

标签： jquery

【解决方案1】：

考虑以下内容。

$(".item").hide(); 
$('input[name="filter-input"]:checked').each(function(i){
  $(".row > .item." + $(this).val()).show();
});

这将隐藏所有项目，然后迭代每个选定的项目。它将显示选择了 Class 的每个元素。选择器完成所有工作。

例如如果用户选择food和pasta，则所有以food和pasta为子级的row都会显示出来。

$(".row > .item.pasta").show();

这将对每个选中的项目进行。

您也可以按照您的建议将它们存储在一个数组中。例如：

selectedOptions = ["food", "pasta"];

您可以简单地使用.join()，但您可能希望将. 添加到每个，以便它可以成为一个类选择器。

$(".item").hide();
var selectedOptions = [];
$('input[name="filter-input"]:checked').each(function(i){
  selectedOptions.push($(this).val());
});
$.each(selectedOptions, function(k, v){
  selectedOptions[k] = "." + v;
});
$(selectedOptions.join(", ")).show();

这将导致类似：

$(".food, .pasta").show();

您可能会注意到要完成同样的事情需要大量额外的代码。

【讨论】：

【解决方案2】：

您可以使用 querySelectorAll 为您完成繁琐的工作，以查找所有匹配的元素。只需建立一个选择器字符串。

const wrapper = document.querySelector(".wrapper");
document.querySelector("fieldset").addEventListener("change", function () {

  const cbs = Array.from(document.querySelectorAll('input[type="checkbox"]:checked'));
  const selectedClasses = cbs.map(cb => cb.value).join("");
  const matchedElems = wrapper.querySelectorAll(selectedClasses);
  console.log(matchedElems);


});

<div class="wrapper">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="one two">1 2</div>
  <div class="one three">2 3</div>
  <div class="two three">1 3</div>
  <div class="one two three">1 2 3</div>
</div>

<form>
  <fieldset>
    <legend>Filters</legend>
    <input type="checkbox" value=".one" id="cb1" /><label for="cb1">1</label>
    <input type="checkbox" value=".two" id="cb2" /><label for="cb2">2</label>
    <input type="checkbox" value=".three" id="cb3" /><label for="cb3">3</label>
  </fieldset>
</form>

【讨论】：