javascriptで子オブジェクトをループするにはどうすればよいですか？

Question

私は関数内のコードがあります。tableFieldsのはconsole.logによると

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

を、私は私が行う必要があると仮定して、私は戻って配列を取得しています。ループ内のitemのconsole.logは未定義を返します。 tableFieldsをループして各オブジェクトをテーブルに挿入するにはどうすればよいですか？ 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()} 

ここでは、コードのセクション全体である：

$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

トリックはthe DOM Element.children attributeは、配列が、array-ではないということです長さを持ち、配列のように索引付けすることができるコレクションのようなコレクションですが、配列ではありません：

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

一般に、for-in-loopの代わりにfor-loopを使用して配列を反復処理する方が良い方法です。

Answer 2

tableFieldsが配列の場合、次のような要素をループすることができます

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

を私はyou'rで論理エラーを見た方法では、ループ

のための終わりから ;を削除code.just

ここをクリック：

for (item in tableFields); {

これは、次の行が一度だけ実行されますちょうどnothing.and行うにyou'rループが発生します。

// Do stuff 

Answer 3

後方互換性のあるバージョン（IE9 +）は

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

ES6ですwayは

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