Comment boucler à travers les objets enfants en javascript ?

Question

J'ai ce code dans une fonction :

tableFields = tableFields.children;
for (item in tableFields) {
    // Faire quelque chose
}

Selon un console.log de tableFields, je reçois un tableau comme je le suppose. Un console.log de l'élément dans les boucles renvoie undefined. Que dois-je faire pour parcourir tableFields et insérer chaque objet dans un tableau ?

console log de 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()}

Voici la section de code entière que j'ai jusqu'à présent :

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

    $form = '

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();
}

    Hours:

    Rate:

    Description:

        Work Order Number:

        Customer:
        '.$select.'

    ';
    if (!is_null($this->id)) {
        $form .= '';
    }
    $form .= '';

    $this->component($form);

Answer 1

Le truc est que l'attribut Element.children du DOM n'est pas un tableau mais une collection de type tableau qui a une longueur et peut être indexée comme un tableau, mais ce n'est pas un tableau :

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

Soit dit en passant, en général, il est préférable d'itérer sur un tableau en utilisant une boucle for classique plutôt qu'une boucle for-in.

Answer 2

Dans ECS6, on peut utiliser Array.from() ou syntaxe Spread pour les tableaux:

const listItems = document.querySelector('ul').children;
const listArray = Array.from(listItems);
// ou
const listArray = [...listItems];
listArray.forEach((item) => {console.log(item)});

Answer 3

Le JS moderne utilise également le for..of pour nous permettre d'itérer sur les objets enfants du DOM, les tableaux ou d'autres objets itérables. Je trouve que c'est très propre et simple.

var children = tableFields.children;
for (c of children) { 
  console.log(c);
  // Faire quelque chose avec l'enfant c
}

Answer 4

Si tableFields est un tableau, vous pouvez boucler à travers les éléments comme suit :

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

au fait, j'ai vu une erreur logique dans votre code. il suffit de supprimer le ; de la fin de la boucle for

juste ici :

for (item in tableFields); { .

cela fera en sorte que votre boucle ne fasse rien du tout et que la ligne suivante ne sera exécutée qu'une seule fois :

// Faire quelque chose

Answer 5

La version compatible avec les anciennes versions (IE9+) est

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

La façon es6 est

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