How i can iterate over nested section elements?

Question

Hi I have the next strucutre in a web:

<section class="item-list clearfix jq-itemList">

  <section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="1111" style="height: 562px;">
</section>

  <section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="2222" style="height: 562px;">
</section>

  <section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="3333" style="height: 562px;">
</section>

 </section>

How I can iterate over the nested sections inside the parent section with pure javascript?

I tried with something like:

document.getElementById("section").getElementsByTagName("section");

but is not working, what is the best approach?

Thanks!

Because you have duplicate IDs, which is invalid markup. IDs must be unique. Use classes instead. Also, your selector is invalid; there's no `section` ID. — Obsidian Age, Oct 17 '19 at 21:27
@ObsidianAge He's not selecting the duplicate ID, so it shouldn't affect the results. — Barmar, Oct 17 '19 at 21:29
Duplicate of [How do I loop through children objects in javascript?](https://stackoverflow.com/q/17094230/215552) — Heretic Monkey, Oct 17 '19 at 21:34
Do you have anything to identify that parent `section` besides the classes? Are there other `section`s in your document? Do you want just those three child `section`s or do you also want any descendant `section`s that may exist? — Heretic Monkey, Oct 17 '19 at 21:40

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

Use queryselector and use css selector section section :

document.querySelectorAll('section section').forEach(e => {
  const id = e.getAttribute('data');
  console.log(id);
});

<section class="item-list clearfix jq-itemList">

  <section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="1111" style="height: 562px;">
  </section>

  <section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="2222" style="height: 562px;">
  </section>

  <section id="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="3333" style="height: 562px;">
  </section>

</section>

Keep in mind that id should be unique to the element, you might want to consider changing the ids of the sections.

score 0 · Answer 2 · answered Oct 17 '19 at 21:37

Using non unique id is illegal and will cause many problems. Use name attribute instead with querySelector

sections= document.querySelectorAll('section section[name=cart-section]');

sections.forEach(s=> console.log(s.getAttribute('data')) );

sections = document.querySelectorAll('section section[name=cart-section]');

sections.forEach(s => console.log(s.getAttribute('data')));

<section class="item-list clearfix jq-itemList">

  <section name="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="1111" style="height: 562px;">
  </section>

  <section name="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="2222" style="height: 562px;">
  </section>

  <section name="cart-section" class="col-md-3 col-xs-12 col-sm-12 item" displaynamemaxlength="50" data="3333" style="height: 562px;">
  </section>

</section>

How i can iterate over nested section elements?

2 Answers2