根据部分匹配选择类名

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

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

const bk = document.querySelectorAll("#bkLst div");

bk.forEach(el => {
el.addEventListener("click", () => {
let bn = el.textContent;
...

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

我该怎么做呢?

你可以用CSS做到这一点!

你正在寻找一个CSS属性选择器

[class^="bk"]针对的是第一个类名以"bk"
开头的元素
[class*=" bk"]针对类名以"bk"开头的元素。
[class^="bk"], [class*=" bk"] { color: red; }
<div id="bkLst" class="dropdown-menu"> <div class="dropdown-item bk7">ABC</div> <div class="dropdown-item not-really-bk">DEF</div> <div class="dropdown-item bk65">XYZ</div> <div class="dropdown-item notbk">LMNOP</div> <div class="bk9000">QRSTUV</div> </div>

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")]获取#bkLst中的所有div元素，并通过迭代将NodeList转换为数组。
el.className.split(" ")在空格上分割className(反映class属性)，给出结果数组。
.some(n => n.startsWith("bk"))查看数组中是否有以bk
开头的条目
.filter只保留.some返回true的表项。

相关内容

最新更新

热门标签：