CODEWITHSUNDEEP
javascriptjqueryloopsparentchildren
MLGEditz
MLGEditz

Reputation: 13

Loop through all children of an div

i'm busy with an page which will load some information from an database, but to do this I first have to declare some stuff. But I need to get access to all the elements inside an html object. So if my HTML code is like this:

    <div class="container">
        <div class="parent1">
            <div class="child1ofparent1"></div>
            <div class="child2ofparent1"></div>
            <div class="child3ofparent1"></div>
        </div>
        <div class="parent2">
            <div class="child1ofparent2"></div>
            <div class="child2ofparent2"></div>
            <div class="child3ofparent2"></div>
        </div>
        <div class="parent3">
            <div class="child1ofparent3"></div>
            <div class="child2ofparent3"></div>
            <div class="child3ofparent3"></div>
        </div>
    </div>

I want to loop through all childrens just by calling $(".container");

The way i'm doing it now is just by looping through everything hardcoded, but since the application will be used by my school some things need to be more flexible.

I already tried this:

$(".container > *").each(function(i, element) {
       console.log(element);
    });

But this only returns the first children (.parent1, .parent2, .parent3).

Upvotes: 0

Views: 960

Answers (5)

Udochukwu Enwerem
Udochukwu Enwerem

Reputation: 2823

My own suggestion. Use the div to determine the level of nesting you want.

For first parent use

$(".container > div").each(function(i, element) {
  console.log(element);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="parent1">
    <div class="child1ofparent1"></div>
    <div class="child2ofparent1"></div>
    <div class="child3ofparent1"></div>
  </div>
  <div class="parent2">
    <div class="child1ofparent2"></div>
    <div class="child2ofparent2"></div>
    <div class="child3ofparent2"></div>
  </div>
  <div class="parent3">
    <div class="child1ofparent3"></div>
    <div class="child2ofparent3"></div>
    <div class="child3ofparent3"></div>
  </div>
</div>

For only children with parent use

$(".container div div").each(function(i, element) {
  console.log(element);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="parent1">
    <div class="child1ofparent1"></div>
    <div class="child2ofparent1"></div>
    <div class="child3ofparent1"></div>
  </div>
  <div class="parent2">
    <div class="child1ofparent2"></div>
    <div class="child2ofparent2"></div>
    <div class="child3ofparent2"></div>
  </div>
  <div class="parent3">
    <div class="child1ofparent3"></div>
    <div class="child2ofparent3"></div>
    <div class="child3ofparent3"></div>
  </div>
</div>

For all children: parent and child use

$(".container div").each(function(i, element) {
  console.log(element);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="parent1">
    <div class="child1ofparent1"></div>
    <div class="child2ofparent1"></div>
    <div class="child3ofparent1"></div>
  </div>
  <div class="parent2">
    <div class="child1ofparent2"></div>
    <div class="child2ofparent2"></div>
    <div class="child3ofparent2"></div>
  </div>
  <div class="parent3">
    <div class="child1ofparent3"></div>
    <div class="child2ofparent3"></div>
    <div class="child3ofparent3"></div>
  </div>
</div>

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65808

You were close. ".container > *" means to look for children only, not all descendants.

Remove the > symbol to loop over descendants.

$(".container *").each(function(i, element) {
  console.log(element.classList[0]);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
        <div class="parent1">
            <div class="child1ofparent1"></div>
            <div class="child2ofparent1"></div>
            <div class="child3ofparent1"></div>
        </div>
        <div class="parent2">
            <div class="child1ofparent2"></div>
            <div class="child2ofparent2"></div>
            <div class="child3ofparent2"></div>
        </div>
        <div class="parent3">
            <div class="child1ofparent3"></div>
            <div class="child2ofparent3"></div>
            <div class="child3ofparent3"></div>
        </div>
    </div>

Upvotes: 0

War10ck
War10ck

Reputation: 12508

While the other answers are correct, the universal selector (*) should be discouraged if possible due to the fact that it matches any element, not just the one's you are looking for which, depending on your DOM tree, may have a significant impact on your performance. You may be able to use an attribute selector such as the one shown below:

$(function () {

  var $output = $('#output');

  $('.container [class^="child"]').each(function () {
    var $this = $(this);
    $('<li />', { text: $this.prop('nodeName') + " w/ class " + $this.attr('class') }).appendTo($output);
  });

});
h1 {
  font-family: Arial, sans-serif;
  font-size: 16;
}
#output {
  list-style-type: square;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
        <div class="parent1">
            <div class="child1ofparent1"></div>
            <div class="child2ofparent1"></div>
            <div class="child3ofparent1"></div>
        </div>
        <div class="parent2">
            <div class="child1ofparent2"></div>
            <div class="child2ofparent2"></div>
            <div class="child3ofparent2"></div>
        </div>
        <div class="parent3">
            <div class="child1ofparent3"></div>
            <div class="child2ofparent3"></div>
            <div class="child3ofparent3"></div>
        </div>
    </div>
    <h1>Selected Elements:</h1>
    <ul id="output"></ul>

Reference: Attribute Starts With Selector [name^=”value”]

Upvotes: 1

Ori Drori
Ori Drori

Reputation: 191966

You are using the child combinator - ".container > *". Use the descendant combinator instead - ".container *".

$(".container *").each(function(i, element) {
  console.log(element);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="parent1">
    <div class="child1ofparent1"></div>
    <div class="child2ofparent1"></div>
    <div class="child3ofparent1"></div>
  </div>
  <div class="parent2">
    <div class="child1ofparent2"></div>
    <div class="child2ofparent2"></div>
    <div class="child3ofparent2"></div>
  </div>
  <div class="parent3">
    <div class="child1ofparent3"></div>
    <div class="child2ofparent3"></div>
    <div class="child3ofparent3"></div>
  </div>
</div>

Upvotes: 2

Arik
Arik

Reputation: 6501

This will return all children that have .container as an ancestor

    $("*", ".container").each(function(i, element) {
       console.log(element);
    });

Upvotes: 0

Related Questions