时间戳

首页 > 解决方案 > 通过部分匹配选择类名

javascript - 通过部分匹配选择类名

问题描述

我有一个 JS 脚本，我从这样的选择器中选择项目值 onclick()：

HTML

<div id="bkLst" class="dropdown-menu">
    <div class="dropdown-item bk7">ABC</div>
    <div class="dropdown-item bk65">XYZ</div>
</div>

JS

const bk = document.querySelectorAll("#bkLst div");
        
bk.forEach(el => {
   el.addEventListener("click", () => {
   let bn = el.textContent;

  ...

我还需要为以bk开头的项目选择类的名称，如bk7。

我怎样才能做到这一点？

标签： javascript

解决方案

CSS 没有相应的语法（请参阅此处的选择器规范）。您可以基于以 X 开头的属性进行查询，但类名可能不在class属性的开头。

您最好的选择是在它们上使用一个通用类，并在必要时添加它。例如，在您的示例中，div具有这些类的所有元素也具有dropdown-item并且该父级中没有其他dropdown-item元素，因此您可以使用它。例如：

const bk = document.querySelectorAll("#bkLst .dropdown-item");

如果可能还有其他.dropdown-item匹配项，请添加您自己的类：

<div id="bkLst" class="dropdown-menu">
    <div class="dropdown-item your-class bk7">ABC</div>
    <div class="dropdown-item your-class bk65">XYZ</div>
</div>

接着

const bk = document.querySelectorAll("#bkLst .your-class");

在最坏的情况下，如果您无法修改 HTML 并且必须使用这些部分类名，您可以过滤从以下获得的结果querySelectorAll：

const bk = [...document.querySelectorAll("#bkLst div")]
    .filter(el => el.className.split(" ").some(n => n.startsWith("bk")));

请注意，这为您提供了一个数组而不是NodeList. 这个怎么运作：

  • [...document.querySelectorAll("#bkLst div")]获取所有div元素#bkLst并NodeList通过迭代将其转换为数组。
  • el.className.split(" ")在空格上拆分className(reflectedclass属性)，给出结果数组。
  • .some(n => n.startsWith("bk"))查看数组中是否有任何条目以bk
  • .filter只保留.some返回的条目true。

推荐阅读