如何通过HTML循环获取元素？

Question

I want to do something like:

var i=0;

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

Can I do that? I tried, but it didn't work.

Answer 1

Yes, example:

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

A working sample: http://jsfiddle.net/bqF9T/

But as noted in the comments, be sure to use valid IDs as what happens to work in Chrome may not in other browsers if the HTML is invalid.

Answer 2

Try this:

var i = 0;

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

You had an invinite loop (i was always smaller then 20) Also did you use the static number 20 instead of i. the more or less dynamic number And as mentiod else where, an ID can't start with only an number...

Answer 3

You have actually created an infinite loop. Since you don't change the value of i, it will be 0 forever, and thus always < 20.

You should also give your elements ids that aren't just numbers (as that won't work).

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

Try a for loop, like this:

// 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();
    }
});

Answer 4

ID's can't begin with a number , so you have to have something before the count.

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

So prefix it with something else to make it valid, I chose " example_ ".

The other problem is that you're always trying to get the element with "20" in the ID. You want to get all of them so you have to use your loop counter, i .

Also note that the counter goes from 0 to 19 (when i = 20 , i<20 is FALSE) so keep that in mind so it matches with your markup.

JS:

var i=0;

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

with your markup looking like:

<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 5

if you have a collection of elements where id="htmlID1-20" you can change the code to somthing like this:

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)

it is not recomendet to create variabels or functions inside loops