querySelectorAll не работает для указанных элементов

Question

Я пытаюсь достичь, чтобы выбрать все указанные элементы, которые я хочу использовать looped 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"; 

Что я сделал не так?

Answer 1

Оператор return завершает выполнение функции, то есть последующий код не выполняется. Ваша функция возвращает первый выбранный элемент в первой итерации цикла, и это его конец.

В этом случае нет необходимости итерировать коллекцию. Если вы хотите получить все выбранные элементы, вы можете вернуть возвращаемое значение метода querySelectorAll, но тогда вы не можете использовать свойство style таким образом, поскольку возвращенная коллекция не имеет такого свойства.

Обратите внимание, что идентификаторы должны быть уникальными. Вместо этого вы должны использовать классы.

Answer 2

Использование class вместо id - Идентификаторы должны быть уникальными, но классы могут быть назначены как много элементов, как вы хотите, и вы можете назначить столько классов для каждого элемента, а также, так

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

и я предлагаю вам использовать Jquery вместо этого, так что вы можете сделать цвет фона, как

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

Answer 3

проблема находится в 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')