Question

我有一个写<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';
}

Answer 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_1到first_100块包裹在div中。

Answer 2

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

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';
}

Chrome，FF，Opera，Safari和IE8 +支持

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

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

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

DEMO - 使用querySelectorAll()

如何制作循环？

4 个答案: