如何制作循环?

时间:2013-04-05 01:32:25

标签: javascript

我有一个写<div id="first_<?php echo $z; ?>" class="source">

的php数组

我正在尝试在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';
}

4 个答案:

答案 0 :(得分:1)

您错误地使用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_1first_100块包裹在div中。

答案 1 :(得分:1)

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

答案 2 :(得分:0)

您正在错误地添加i,只在您声明变量时使用var,而不是使用它们。试试这个:

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

答案 3 :(得分:0)

如果您不需要支持IE7或更早版本,您可以使用querySelectorAll(),使用属性选择器并遍历生成的节点,类似于:

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

for(i = 0; i < elements.length; i += 1){
    elements[i].style.display = 'none';
}
Chrome,FF,Opera,Safari和IE8 +支持

querySelectorAll(),并允许您指定任何有效的CSS选择器。

这里的好处是,您不必事先了解您拥有多少元素,因为您只需动态创建一个节点集合,其标识符以first_开头并迭代完毕。

如果您只想选择以div开头的first_个元素,您也可以在选择器中更具体,并使用document.querySelectorAll('div[id^="first_"]');


DEMO - 使用querySelectorAll()