How to know the number of "children" of a class?

Asked

Viewed 1,972 times

2

For example, using a for:

var children = numero_de_filhos_de_uma_classe_qualquer;
for (i = 0; i <= (children); i++){
    document.getElementsByClassName("classe")[i];
}

HTML

<div class="classe" ></div> // Filho Número 1
<div class="classe" ></div> // Filho Número 2
<div class="classe" ></div> // Filho Número 3
<div class="classe" ></div> // Filho Número 4

There’s a way to do it?

1 answer

7


You can use .children to count the number of children in a class, example:

Example: Jsfiddle

HTML

<div id="classe">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

Javascript

var minhaClasse = document.getElementById('classe');
alert(minhaClasse.children.length);

After editing the question

Example 2

filhos = document.getElementsByClassName('classe');
for(var i = 0; i < filhos.length; i++){
 console.log(filhos[i]);
}


Or, to get as close to your question

Example 3

HTML

<div id="pai">
    <div class="classe" >Filho número 1</div> 
    <div class="classe" >Filho número 2</div> 
    <div class="classe" >Filho número 3</div> 
    <div class="classe" >Filho número 4</div>
</div>

Javascript

var pai = document.getElementById('pai');
var filhos = pai.children.length;

for(var i = 0; i < filhos; i++){
    console.log(document.getElementsByClassName("classe")[i]);
}
  • Your example is not quite what I wanted, but I have further specified in my edited reply.

  • @Samirbraga edited the answer, check if it solves the problem

Browser other questions tagged

You are not signed in. Login or sign up in order to post.