मैं जावास्क्रिप्ट में बच्चों के ऑब्जेक्ट्स के माध्यम से कैसे लूप करूं?

Question

मैं एक समारोह में इस कोड है: tableFields की एक console.log के अनुसार

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

, मैं वापस आ गया के रूप में मुझे लगता है मैं क्या करने की जरूरत एक सरणी हो रही है। लूप के भीतर आइटम का एक console.log अनिर्धारित लौटाता है। टेबलफिल्ड्स के माध्यम से लूप करने के लिए मुझे क्या करना है और प्रत्येक ऑब्जेक्ट को किसी तालिका में डालना है?

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 
} 

संयोग से, सामान्य रूप से यह एक इन-लूप के बजाय मूल फॉर-लूप का उपयोग करके सरणी को फिर से चलाने के लिए एक बेहतर अभ्यास है।

Answer 2

अगर tableFields एक सरणी है, तो आपको निम्न के रूप में तत्वों के माध्यम से लूप कर सकते हैं:

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

माध्यम से मैं एक तार्किक त्रुटि देखा you'r code.just में पाश के लिए

के अंत से ; को दूर

यहां पर:

for (item in tableFields); {।

इस you'r पाश का कारण होगा बस कुछ नहीं.और निम्न पंक्ति केवल एक बार निष्पादित किया जाएगा करने के लिए:

// Do stuff 

Answer 3

पीछे की ओर संगत संस्करण (IE9 +)

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

ES6 है रास्ता

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