Dom 中的目标元素与 Array 中存在的类匹配

Question

我有一个类数组，它是一个动态数组，可以有 n 个这样的类名。

let arr = ['Product', 'year', 'role'];

然后我在这样的父 div 中有很多带有这些类的元素。

<div class="parent">
    <div class="year"></div>
    <div class="abc"></div>
    <div class="Product"></div>
    <div class="diffClass"></div>
    <div class="role"></div>
    <div></div>
</div>

现在在这个结构中，我只需要在 div 上添加页面加载时活动的类，该类是数组中存在的类。 我试图映射数组但没有表来获取与 Arrays 类匹配的 div 提前致谢。

Answer 1

您可以使用, 选择“或”类，例如

$(".product,.year,.role")

如果其中任何一个匹配，将选择
（相反，要使它们全部匹配，请使用.product.year.role - 这不是这里的要求）

要将数组转换为字符串，请使用arr.join，给出：

let arr = ['Product', 'year', 'role'];

$("." + arr.join(",.")).addClass("active");

.active { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
    <div class="year">year</div>
    <div class="abc">abc</div>
    <div class="Product">Product</div>
    <div class="diffClass">diffClass</div>
    <div class="role">role</div>
    <div></div>
</div>