querySelectorAll不適用於指定的元素

我試圖實現選擇我想要使用循環的所有指定的元素querySelectorAll但我仍然失敗。總是選擇第一個元素。這裏是我的代碼：querySelectorAll不適用於指定的元素

HTML：

<div id="text">Text 1</div> 
<div id="text">Text 2</div> 
<div id="text">Text 3</div>

JS：

function query(selector) { 
    var elem = document.querySelectorAll(selector); 

    if(elem.length) { 
     for(var i = 0; i < elem.length; i++) { 
      return elem[i]; 
     } 
    } 
} 

query("#text").style.background = "red";

我做了什麼錯？

來源

2016-05-15 JTrixx16

你能指望什麼？您返回集合中的第一個項目也必須是唯一的ID。 –

@ DanielA.White儘管有非唯一ID，querySelectorAll確實會選擇他提供的所有元素。 – Qwerty

你打算只調整風格還是你在尋找一個通用的可鏈接解決方案？ – Qwerty

return語句終止函數執行，即後續代碼不會執行。你的函數在循環的第一次迭代中返回第一個選中的元素，這就是它的結尾。

在這種情況下，不需要迭代集合。如果你想獲得所有選定的元素，你可以返回querySelectorAll方法的返回值，但是你不能以這種方式使用style屬性，因爲返回的集合沒有這樣的屬性。

function query(selector) { 
    // convert the NodeList into a regular array 
    // https://developer.mozilla.org/en-US/docs/Web/API/NodeList 
    return Array.prototype.slice.call(document.querySelectorAll(selector)); 
} 

// since `query` returns an array you can use it's `forEach` method 
// for iterating over the array 
query(".text").forEach(function(el) { 
    el.style.backgroundColor = "red"; 
});

請注意，ID必須是唯一的。你應該使用類來代替。

來源

2016-05-15 00:30:55 undefined

雖然ID應該是唯一的，但querySelectorAll會獲取所有重複的ID匹配。 – 2016-05-15 00:46:48

這是最好的方式去與香草javascript – Popatop15

@squint是的，那是真的。謝謝你提到它。 – undefined

使用class，而不是id - IDS必須是唯一的，但只要你想的類可以分配給儘可能多的元素，你可以分配儘可能多的參加到每一個元素一樣，所以

<div class="mytext">Text 1</div> 
<div class="mytext">Text 2</div> 
<div class="mytext">Text 3</div>

我建議你使用jQuery來代替，所以你可以做背景色

$(".mytext").css({background:"red"});

來源

2016-05-15 00:43:27 Soren

問題中的問題與ID不是唯一的，jQuery是沒有必要的。 – 2016-05-15 00:48:44

的問題是在return語句，該語句只返回第一個元素和然後將鏈應用到它。之後，它完成了，沒有更多的元素得到處理。

您可以使用此黑客，有一個真正普遍敷貼。

function query(selector, callback) { 
    [].forEach.call(document.querySelectorAll(selector), callback) 
}

這是如何使用它。

query('#option', function(el){el.style.backgroundColor = "red"}) 
// or ES6 
query('#option', el => el.style.backgroundColor = "blue")

一次將一些變化：

query('#option', el => { 
    el.style.backgroundColor = "green" 
    el.style.color = 'cyan' 
    el.style.textDecoration = 'line-through' 
})

或者模擬天生鏈，如果你想成爲討厭不管出於什麼原因？

function query(selector, callback) { 
    [].forEach.call(document.querySelectorAll(selector), callback) 

    return arguments.callee.bind(undefined, selector) 
}

用法：

query('#option', el => el.style.backgroundColor = 'red')(el => el.style.color = 'black')(el => el.style.textDecoration = 'underline')

來源

2016-05-15 01:29:24 Qwerty

不錯！但是你可以跳過'.slice（）'和匿名函數，並且只執行'[] .forEach.call（document.querySelectorAll（selector），callback）' – 2016-05-16 17:51:15

querySelectorAll不適用於指定的元素

回答

相關問題