Question

我想获得包含类menu-item-link和mk-image-link的所有元素。以下表达式是正确的吗？

a[class*="menu-item-link"], a[class*="mk-image-link"]

没有选择任何东西，所以我猜不是：）

感谢您的帮助。

祝你好运，安东

Answer 1

你必须这样做'a.menu-item-link, a.mk-image-link'它会检查是否有这个类。

const selected = document.querySelectorAll('a.menu-item-link, a.mk-image-link')
const selected2 = document.querySelectorAll('a.menu-item-link.js-smooth-scroll, a.mk-image-link.js-smooth-scroll')

console.log(selected)
console.log(selected2)

<div class="menu-item-link"><div>
<div><div>
<a class="menu-item-link"></a>
<a class="mk-image-link"></a>
<a class="mk-image-link menu-item-link"></a>
<a class="menu-item-link js-smooth-scroll" href="/superfood-rezepte/">SUPERFOOD REZEPTE</a> <a href="...." target="_self" class="mk-image-link">

Answer 2

document.querySelectorAll允许对选择器进行分组。

请注意，它会选择具有指定class names的所有元素，因此不需要通配符。即如果你的目标是menu-item-link和mk-image-link，下面的内容应该对你有用。

所以，你可以试试下面的内容：

＆＃13;

var elements = document.querySelectorAll("a[class~='menu-item-link'], a[class~='mk-image-link']"); // OR 
elements = document.querySelectorAll("a.menu-item-link, a.mk-image-link"); // Would both selects the same
elements.forEach(function(element, index, array) {
  element.style.backgroundColor = "#999";
});

＆＃13;

<a class="js menu-item-link js-smooth-scroll" href="/superfood-rezepte/">SUPERFOOD REZEPTE</a> <br>
<a class="js menu-item-link js-smooth-scroll-a" href="/superfood-rezepte/">SUPERFOOD </a> <br>
<br>
<a href="#" target="_self" class="mk-image-link">Something</a>
<br>
<a href="#" target="_self" class="mk-image-link1">Another Something</a>
<br>
<a href="#" target="_self" class="mk-image-link js-smooth-scroll-b">Another Something</a>

＆＃13;

获取querySelector所有多个条件

2 个答案: