將.classList.add（）應用於.startsWith（“ example”））的所有div-無jQuery

Question

我希望執行以下操作，但不確定如何正確利用.startsWith目標內容。

這就是我所擁有的：

var divClass = document.querySelector('div').getAttribute('class');

if (divClass.startsWith('example')){
  divClass.classList.add('width', 'height');
 }

如上所示，我嘗試在classList.add()上使用classList.add() ， divClass不占優勢。 我相信這個策略確實是不正確的，但是，我相信類似以下的東西會更接近...

var divClass = document.querySelector('div').getAttribute('class');

if (divClass.startsWith("example")){
  example.classList.add('width', 'height');
 }

...盡管我努力直接針對示例並使用.classList.add()將類應用於示例類的所有div。

如果有人對此有解決方案，將不勝感激，在此先感謝您！

僅供參考-所有解決方案均應使用Vanilla JavaScript（無jQuery）

Answer 1

以example開頭的類名檢索所有div，並遍歷找到的節點集合

let divClass = document.querySelectorAll('div[class^="example"]');
[].forEach.call(divClass, function(div) {
  /* do something on div */
});

Answer 2

您可以使用此選擇器getElementsByClassName

var list = document.getElementsByClassName("example");
        for(var i=0;i<list.length;i++){
        list[i].classList.add("mystyle");
        }

用於搜索類似的類別，此解決方案有效

var x = document.querySelectorAll('div');    
 var i;
    for (i = 0; i < x.length; i++) {
      if(x[i].classList.value.indexOf('example') > -1){
      x[i].classList.add("mystyle");
      }
    }

Answer 3

querySelector僅獲得一個元素，因此您僅選擇頁面上的第一個div並對其進行處理。 要獲取元素列表，請使用querySelectorAll 。

在jQuery中，您可以調用$('div').addClass('example')而不必關心是否存在一個div或很多，因為jQuery會為您遍歷所有這些。 如果沒有jQuery，則必須自己進行迭代：

var divs = document.querySelectorAll('div');
for ( var i = 0; i < divs.length; i++ ) {
    divs[ i ].classList.add('example')  
}

要么

document.querySelectorAll('div').forEach(div => div.classList.add('example'))

document.querySelectorAll( selector )與$( selector ) document.querySelectorAll( selector )非常相似，但是document.querySelector( selector )更像$( selector ).first() 。