Как сделать цикл?

Question

У меня есть массив PHP, который пишет <div id="first_<?php echo $z; ?>" class="source">

Я пытаюсь создать цикл в JavaScript, так что я могу изменить style.display свойства каждого. Общая сумма first_ с может быть от 0 до 100.

Все, что я знаю, как сделать что-то вроде этого:

function setup() { 
    cow = document.getElementById('first_1'); 
    cow.style.display='none'; 
    cow = document.getElementById('first_2'); 
    cow.style.display='none'; 
    cow = document.getElementById('first_3'); 
    cow.style.display='none'; 
    } 

Мое предположение о том, как сделать это будет что-то вроде этого:

for (var i = 0; i < 100; i++) { 
    cow = document.getElementById('first_'var i); 
    cow.style.display='none'; 
} 

Answer 1

for (var i = 0; i < 100; i++) { 
    var cow = document.getElementById('first_' + (i + 1)); 
    if (cow) 
    cow.style.display='none'; 
} 

Answer 2

Неправильно используется i. Вы используете только var, когда объявляет переменной.

function setup() { 
    for (var i = 0; i < 100; i++) { 
     document.getElementById('first_' + i).style.display = 'none'; 
    } 
} 

Вы должны убедиться, что элемент, который вы получаете, существует, поэтому исключение не выбрасывается. Вы что, пытаясь получить элемент, и если это «truthy», установите style.display переменную:

function setup() { 
    for (var i = 0; i < 100; i++) { 
     var elem = document.getElementById('first_' + i); 
     if (elem) 
      elem.style.display = 'none'; 
    } 
} 

---

Из того, что я читал, вы хотите, чтобы быть в состоянии обеспечить максимум. Вы можете просто добавить параметр:

function setup(max) { 
    for (var i = 0; i < max; i++) { 
     ... 

Кроме того, это звучит, как это может быть от 0 до 100 включительно . В этом случае, просто изменить < к <=:

function setup(max) { 
    for (var i = 0; i < max; i++) { 
     ... 

---

Я бы посоветовал, что это плохая практика, и вместо него вы должны обернуть всю first_1 через first_100 блок в div.

Answer 3

Неправильно вы используете i, используйте только var, когда вы объявляете переменные, не используя их. Попробуйте это:

for (var i = 0; i < 100; i++) { 
    cow = document.getElementById('first_' + i); 
    cow.style.display = 'none'; 
} 

Answer 4

Если вам не нужна поддержка IE7 и старше вы можете использовать querySelectorAll(), используя селектор атрибута и перебирать в результате узлы, похожие на это:

var elements = document.querySelectorAll('[id^="first_"]'); 

for(i = 0; i < elements.length; i += 1){ 
    elements[i].style.display = 'none'; 
} 

querySelectorAll() поддерживается в Chrome, FF, Opera, Safari и IE8 + и позволяет указать любой допустимый селектор CSS.

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

Если вы хотите выбрать только div элементы, начиная с идентификатором first_ вы можете быть более конкретным в вашем селекторе и использовать document.querySelectorAll('div[id^="first_"]');

---

DEMO - Использование querySelectorAll()

---