Question

我试图在运行时通过循环检索父<li>节点的所有<ul> 子节点。然而，循环永远运行导致浏览器立即崩溃。我做错了什么？

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
}

Answer 1

在jquery中使用：

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

Answer 2

您可以像这样轻松实现

.col-lg-3 (or focus-box) { background-color: orange; }
.item-1 { background-color: orange; }

小提琴：http://jsfiddle.net/4n4dwqpt/

Answer 3

你做错了是创建一个无限循环，因为while循环的条件总是会计算为true。相反，你想要这样做

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

Answer 4

可以通过jquery $ .each轻松完成

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

读取<ul>集合的HTML子元素

4 个答案: