獲取查詢選擇器全部多個條件

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以下應該適合你。

所以，你可以嘗試以下：

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"; 
 
});

<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>