我有一个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 *。
我该怎么做呢?
2条答案
按热度按时间gopyfrb31#
CSS没有语法(见这里的选择器规范),你可以根据以X开头的属性进行查询,但是类名不能在
class
属性的开头。最好的办法是在它们上面使用一个公共类,如果需要的话可以添加它。例如,在你的例子中,所有的
div
元素都有dropdown-item
,并且在那个父元素中没有其他的dropdown-item
元素,所以你可以使用它。例如:如果可能存在其他
.dropdown-item
匹配项,请添加您自己的类:然后
在最坏的情况下,如果你不能修改HTML并且 * 不得不 * 从那些部分类名开始工作,你可以过滤从
querySelectorAll
得到的结果:请注意,这是一个数组,而不是
NodeList
。[...document.querySelectorAll("#bkLst div")]
获得#bkLst
中的所有div
元素,并通过迭代将NodeList
转换为数组。el.className.split(" ")
在空格上拆分className
(反射的class
属性),给出结果的数组。.some(n => n.startsWith("bk"))
查看数组中是否有以bk
开头的条目.filter
仅保留.some
返回true
的条目。azpvetkf2#
你可以用CSS做到这一点!
您正在寻找CSS Attribute Selector
[class^="bk"]
以第一个类名以"bk"开头的元素为目标[class*=" bk"]
的目标元素具有以"bk"开头的类名,该类名跟在其他类名之后。