javascript - 如何通过循环获取元素，html？

Question

我想做类似的事情：

var i=0;

while(i<20)
{
  var temp= document.getElementById(''+20);
  $(temp).hide();
  i++;
}

我可以这样做吗？我试过了，但没有用。

Answer 1

是的，例如：

for (var i=0; i < 20; i++) {
  var temp = document.getElementById(i);
  console.log(temp);
}

一个工作示例：http: //jsfiddle.net/bqF9T/

但正如评论中所指出的，请务必使用有效的 ID，因为如果 HTML 无效，则在 Chrome 中发生的情况可能无法在其他浏览器中使用。

Answer 2

ID不能以数字开头，因此您必须在计数之前有一些东西。

ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 ("_") , 冒号 (":") 和句点 (".")。

所以在它前面加上其他东西使它有效，我选择了“ example_”。

另一个问题是您总是试图获取 ID 中带有“20”的元素。你想得到所有这些，所以你必须使用你的循环计数器，i.

另请注意，计数器从 0 变为 19（当i = 20,i<20为 FALSE 时），因此请记住这一点，以便它与您的标记匹配。

JS：

var i=0;

while(i<20)
{
  var temp= document.getElementById('element_' + i);
  $(temp).hide();
  i++;
}

您的标记看起来像：

<div id="element_0">first</div>
<div id="element_1">second</div>
<div id="element_2">foo</div>
...
<div id="element_19">bar</div>

Answer 3

如果您有一组 id="htmlID1-20" 的元素，您可以将代码更改为如下所示：

var i = 20
  , elems = [] // empty array to keep the elements
while(i--){  //this trick reduces the variable i by 1 each time the loop runs, stopping at 0
    elems.push(document.getElementById("htmlID"+i)) //collect the dom elements and push a refrance to it in the array
}
console.log(elems)

不建议在循环内创建变量或函数

Answer 4

尝试这个：

var i = 0;

while(i < 20){
    var temp = document.getElementById('Elid_'+i);
    // DO STUFF
    i++;
}

你有一个无限循环（我总是小于 20）你也使用静态数字 20 而不是 i。或多或少的动态数字，正如在其他地方所提到的，ID 不能仅以数字开头...

Answer 5

您实际上已经创建了一个无限循环。由于您不更改 i 的值，因此它将永远为 0，因此始终 < 20。

您还应该为元素提供不仅仅是数字的 id（因为这不起作用）。

<div id='something1'></div>

尝试一个 for 循环，如下所示：

// Wait for the page to finish loading.
window.onload = function() {
    // Run your loop.
    for(var i = 0; i < 20; i++) {
        var temp = document.getElementById('something' + i);

        // Do stuff with temp.
    }
}

// Or, with jQuery
$(document).ready(function() {
    // Run your loop.
    for(var i = 0; i < 20; i++) {
        var $temp = $('#something' + i);

        $temp.hide();

        // Or, if you're only hiding...
        $('#something' + 1).hide();
    }
});