Làm cách nào để lặp qua các đối tượng con trong javascript?

Question

Tôi có mã này trong một hàm:

tableFields = tableFields.children; 
for (item in tableFields) { 
    // Do stuff 
} 

Theo một console.log của tableFields, tôi nhận được một mảng trở lại như tôi giả sử tôi cần phải làm. Một console.log của mục trong vòng trả về không xác định. Tôi phải làm gì để lặp qua tableFields và chèn từng đối tượng vào một bảng?

console log của tableFields:

HTMLCollection[label, input, label, input 25, label, input, input, input Remove] 


0 
label 

1 
input 

2 
label 

3 
input 25 

4 
label 

5 
input 

6 
input 

7 
input Remove 

description[] 
input 

hours[] 
input 

invoice_number 
input 

getlength 
8 

rate[] 
input 25 

item 
item() 

iterator 
iterator() 

namedItem 
namedItem() 

__proto__ 
HTMLCollectionPrototype { item=item(), namedItem=namedItem(), iterator=iterator()} 

Dưới đây là toàn bộ phần mã như tôi có cho đến nay:

$this->title("Test"); 
    $this->defaultMenu(); 
    $select = ""; 
    $names = Customer::getNames(); 
    foreach ($names as $id => $name) { 
     $select .= '<option value="'.$id.'"'; 
     if ($this->customerid == $id) $select .= ' selected '; 
     $select .= '>'.$name.'</option>'; 
    } 

    $form = ' 
<script type="text/javascript"> 

var counter = 0; 

function isEven(int){ 
int = Number(int); 
return (int%2 == 0); 
} 



function moreLabor() { 

    var table = document.getElementById("editTable"); 
    var tableFields = document.getElementById("readroot"); 

    tableFields = tableFields.children; 
    console.log(tableFields); 
    for (item in tableFields) { 

     if (isEven(counter)) { 
      var tableRow = table.insertRow(-1); 
      var label = tableRow.insertCell(-1); 
      console.log(tableFields[item]); 
      label.appendChild(tableFields[item]); 

     } else { 
      var field = tableRow.insertCell(-1); 
      field.innerHTML = item.innerHTML; 


     } 

     counter++; 
    } 

    console.log(); 
var insertHere = document.getElementById("writeroot"); 
} 

window.onload = function(){ 
    document.getElementById(\'moreLabor\').onclick = function(){ moreLabor(); } 
    moreLabor(); 
} 


</script> 

<div id="readroot" style="display: none"> 
<tr> 
    <td><label for="hours">Hours:</label></td> 
    <td><input type="text" name="hours[]" value="" /></td> 
</tr> 
<tr> 
    <td><label for="rate">Rate:</label></td> 
    <td><input type="text" name="rate[]" value="25" /></td> 
</tr> 
<tr> 
    <td><label for="description">Description:</label></td> 
    <td><input type="text" name="description[]" value="" /></td> 
</tr> 

<input type="hidden" name="invoice_number" value="'.$this->number.'" /> 
<tr> 
    <td><input type="button" value="Remove" 
    onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /></td> 
</tr> 

</div> 

<form method="POST" class="invoice" id="edit"> 
<table id="editTable"> 
    <tr> 
     <td><label>Work Order Number:</label></td> 
     <td><input type="text" name="number" value="'.$this->number.'"/></td> 
    </tr> 
    <tr> 
     <td><label>Customer:</label></td> 
     <td><select name="customerid">'.$select.'</select></td> 
    </tr> 
    <span id="writeroot"></span> 

    <tr> 
     <td><input type="button" id="moreLabor" value="Add labor"/></td> 
     <td><input type="submit" name="Save" value="Save" /></td> 
    </tr>'; 
    if (!is_null($this->id)) { 
     $form .= '<input type="hidden" name="id" value="'.$this->id.'"/>'; 
    } 
    $form .= '</table></form>'; 



    $this->component($form); 

Answer 1

Bí quyết là the DOM Element.children attribute không phải là một mảng nhưng một array- như bộ sưu tập có chiều dài và có thể được lập chỉ mục như một mảng nhưng không phải là mảng:

var children = tableFields.children; 
for (var i = 0; i < children.length; i++) { 
    var tableChild = children[i]; 
    // Do stuff 
} 

Ngẫu nhiên, nói chung, thực hành tốt hơn là lặp qua một mảng bằng cách sử dụng vòng lặp cơ bản thay vì một vòng lặp for-in-loop.

Answer 2

nếu tableFields là một mảng, bạn có thể lặp qua các yếu tố như sau:

for (item in tableFields); { 
    console.log(tableFields[item]); 
} 

bằng cách này tôi thấy một lỗi logic trong you'r code.just loại bỏ ; từ cuối vòng lặp for

ngay tại đây:

for (item in tableFields); {.

này sẽ gây ra vòng lặp you'r để làm nothing.and dòng sau sẽ được thực hiện một lần duy nhất:

// Do stuff 

Answer 3

Các phiên bản tương thích ngược (IE9 +) là

var parent = document.querySelector(selector); 
Array.prototype.forEach.call(parent.children, function(child, index){ 
    // Do stuff 
}); 

Các es6 cách là

const parent = document.querySelector(selector); 
Array.from(parent.children).forEach((child, index) => { 
    // Do stuff 
});