Iterate through mutiple div using jquery

Question

I have a model something

<div id="item">
  <div id ="subitem">
    <div id="first"></div>
    <div id="two"></div>
  </div>
</div>

How can I access all the div inside the subitem and every div has different set of operations. Sorry I am new to this.

please, try to take a look here https://stackoverflow.com/questions/7648761/how-to-select-all-children-in-any-level-from-a-parent-in-jquery, and if you still have questions, please let me know what else is unclear for you. you receive all the items with `children` for single level, and `find` traverse more than 1 level. after you receive it, use a loop to iterate it. loop over each item like this https://stackoverflow.com/questions/4735342/jquery-to-loop-through-elements-with-the-same-class. — Utmost Creator, Aug 06 '21 at 08:29

score 2 · Answer 1 · answered Aug 06 '21 at 08:28

You can use .each() and depending on what operations you want to run you can for example use if and if else statements.

$("#subitem > div").each(function() {
  if (this.id == "first") {
    console.log("found div with id " + this.id)
  } else if (this.id == "two") {
    console.log("found div with id " + this.id + ", and it's the second div")
  }
});

Demo

$("#subitem > div").each(function() {
  if (this.id == "first") {
    console.log("found div with id " + this.id)
  } else if (this.id == "two") {
    console.log("found div with id " + this.id + ", and it's the second div")
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="item">
  <div id="subitem">
    <div id="first"></div>
    <div id="two"></div>
  </div>
</div>

Rahul Kumar · Accepted Answer · 2021-08-06T09:02:01.950

1

Use children() method to get the children of element filtered by optional selector "div" and iterate over the matched DOM elements using each() method.

$("#subitem").children("div").each(function () {
    console.log(this.id, this.textContent);
});

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="item">
  <div id ="subitem">
    <div id="first">abc data</div>
    <div id="two">xyz data</div>
  </div>
</div>
<body>
<html>

edited Aug 06 '21 at 09:02

answered Aug 06 '21 at 08:38

Rahul Kumar

3,009
2
16
22

Please consider leaving a comment about why your code solves the OP's problem. The OP is new so I believe an explanation will be appreciated. – Carsten Løvbo Andersen Aug 06 '21 at 08:43
Thanks this is what I needed – Samridhi Sinha Aug 06 '21 at 12:22

Raeesh Alam · Answer 3 · 2021-08-06T12:39:30.810

0

You need to use .each() method with help of > Child Selector and * Asterisk operator.

Like:
element > * = Selects all div elements where the parent is a #subitem element.

Useful Links:
Combinators: https://www.w3schools.com/css/css_combinators.asp
Each Method: https://api.jquery.com/each/

$(document).ready(function () {
    $('#subitem > *').each(function(i,v) {
        console.log($(this).text())
    });   
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="item">
    <div id="subitem">
        <div id="first">First</div>
        <div id="two">Second</div>
        <div id="three">Third : <span>Sub-child</span></div>
    </div>
</div>

edited Aug 06 '21 at 12:39

answered Aug 06 '21 at 09:25

Raeesh Alam

3,380
1
10
9

`element > * = Selects all div elements where the parent is a #subitem element`. Wrong... It does select all div children but also every other element that is a direct child of subitem. If it should only select direct div children then it should be `$('#subitem > div')` – Carsten Løvbo Andersen Aug 06 '21 at 12:17
@CarstenLøvboAndersen No, Not direct child of `#subitem` element because of I used `>` Child Selector then all child not sub-child affect. – Raeesh Alam Aug 06 '21 at 12:28
@RaeeshAlam My comment is not that `>` is wrong but you say `element > * = Selects all div` and that is wrong. `element > div = Selects all div` would be correct – Carsten Løvbo Andersen Aug 06 '21 at 12:40
@CarstenLøvboAndersen I added one `` element inside `#three` div so you can click on `Run code snippet` for sub-child element check. – Raeesh Alam Aug 06 '21 at 12:42
@CarstenLøvboAndersen Thank you for this information. – Raeesh Alam Aug 06 '21 at 12:43
@RaeeshAlam `*` is a wildcard selector, meaning it will select anything. So if your 3 divs had a span sibling then that span would also be selected and not only the divs – Carsten Løvbo Andersen Aug 06 '21 at 12:44

Iterate through mutiple div using jquery

3 Answers3