не querySelectorAll выбора всех элементов

Question

if(document.readyState === 'complete') { 
 
    function $(elements) { 
 
     var matches = document.querySelectorAll(elements); 
 
     for (var i = 0; i < matches.length; i++) { 
 
      var item = matches[i]; 
 
     } 
 
     return item; 
 
    } 
 
} 
 

 
$('div.test').style.fontSize = '36px';

<div class="test">asdf</div> 
 
<div class="asdfd">test</div> 
 
<div class="test">test</div>

Я хотел бы, чтобы выбрать все элементы, используя querySelectorAll, но это, кажется, только на последний элемент.

Answer 1

Вы назначаете переменную в цикле, которая будет возвращать только последний. Вы должны создать массив совпадений, объявив переменную вне цикла или вернуть матчи:

function $(elements) { 
    return document.querySelectorAll(elements); 
} 

Или:

function $(elements) { 
    var matches = document.querySelectorAll(elements); 
    var items = []; 
    for (var i = 0; i < matches.length; i++) { 
    items.push(matches[i]); 
    } 
    return items; 
} 

Answer 2

Конечно! переменная item содержит текущее соответствие итерации. После завершения цикла for он, естественно, удерживает последний согласованный элемент. Javascript выполняется последовательно, то есть оператор return будет выполнен после цикла for.

Answer 3

В свою очередь, каждый пункт присваивается var item.

После того, как вы назначили последнее, вы возвращаете текущее значение item (которое является последним).

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

Answer 4

Элемент переменной не является массивом, затем он переопределяется в каждом цикле итерации. Или определите массив в порядке, сохраняя все селекторы, или добавьте цикл возврата в цикл.

Answer 5

Я вижу, вы пытаетесь использовать цепочку. Это не будет работать с вашей текущей структурой, так как ваша функция выбора только вернет последний сопоставленный элемент из вашего запросаSlectorAll.

Я думаю, что в этом случае было бы лучше либо передать функцию, которую вы хотите сделать для каждого элемента, либо вернуть массив/нод-лист для использования другой функции;

function $(elements, method) { 
    var matches = document.querySelectorAll(elements); 
    for (var i = 0; i < matches.length; i++) { 
     method(matches[i]); 
    } 
} 

$('div.test', function (elem) {elem.style.fontSize = '36px';}); 

Answer 6

Давайте посмотрим на то, что ваша $ функция делает.

1. Выберите все элементы, которые соответствуют запросу
2. Связать первый пункт в списке item ...
3. Назначают п-й элемент в item
4. Return item который теперь содержит последний элемент

So $() возвращает только последний элемент, и на этом объекте вы выполняете задание .style.fontSize = '36px'

Нет простой способ реализовать $, чтобы сделать именно то, что вы пытаетесь сделать.Вы можете попробовать функцию, которая называется так:

$(selector, { 
    fontSize : "36px" 
}); 

Это будет выглядеть примерно так:

function $(selector, properties) { 
    var matches = document.querySelectorAll(selector); 
    for (var i = 0; i < matches.length; i++) { 
     for (var j in properties) { 
      matches[i].style[j] = properties[j]; 
     } 
    } 
} 

Я бы рекомендовал вам в полном мере понять, что это делает, прежде чем двигаться дальше.

Кроме того, способ, которым вы использовали document.readyState, делает его излишним. Вы должны заключить вызов функции в документ document.readyState, а не в определение.