Reading the HTML Children of a
collection

Question

I'm trying to retrieve all the <li> child nodes of a Parent <ul> node via a loop during runtime. However the loop runs forever causing the browser to immediately crash. What am I doing wrong?

HTML:

<ul id="new-ul">
     <li> <input value="323" /> </li>
     <li> <input value="421" /> </li>
     <li> <input value="547" /> </li>
</ul>

Javascript:

//Attempting to retrieve each value in input fields of each <li> child
var idbox = document.getElementById("new-ul");
while (idbox.firstChild) {
     console.log(idbox.firstChild);
     //Browser crashes here
}

Refer to: http://stackoverflow.com/questions/24775725/loop-through-childnodes — Sameer Anand, Oct 12 '15 at 08:44
Well `idbox.firstChild` always has a `firstChild`, so you're creating a endless loop — divoom12, Oct 12 '15 at 08:45

score 2 · Answer 1 · answered Oct 12 '15 at 08:50

2

In jquery use:

$(document).ready(function() {
    $("#new-ul input").each(function(){
        console.log($(this).val())
    });
});

answered Oct 12 '15 at 08:50

P. Frank

5,691
6
22
50

score 1 · Answer 2 · answered Oct 12 '15 at 08:45

1

You can easily achieve it like this

Array.prototype.map.call( document.querySelectorAll("#new-ul input"), function( element,index ){

    console.log( element.value );

});

Fiddle:http://jsfiddle.net/4n4dwqpt/

answered Oct 12 '15 at 08:45

guramidev

2,228
1
15
19

score 1 · Accepted Answer · answered Oct 12 '15 at 08:45

What you're doing wrong is creating an infinite loop because the condition for the while loop will always evaluate to true. Instead, you wanna do this

var parent = document.getElementById('new-ul');
var children = parent.children;
for (var i = 0; i < children.length; i++) {
  console.log(children[i]);
  // Do stuff
}

Fiddle

score -1 · Answer 4 · answered Sep 23 '16 at 07:10

-1

Could be done by jquery $.each easily

$("#your-ul-id li").each(function(){ 
    console.log($(this)) 
});

answered Sep 23 '16 at 07:10

Prashant Chaurasia

1
2

Reading the HTML Children of a collection

4 Answers4

Reading the HTML Children of a
collection