我如何迭代嵌套的部分元素？答案

【问题标题】：How i can iterate over nested section elements?我如何迭代嵌套的部分元素？
【发布时间】：2019-10-18 05:42:29
【问题描述】：

嗨，我有网络中的下一个结构：

<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>

如何使用纯 javascript 遍历父部分内的嵌套部分？

我尝试过类似的东西：

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

但不起作用，最好的方法是什么？

谢谢！

【问题讨论】：

因为你有重复的ID，这是无效的标记。 ID 必须是唯一的。改用类。此外，您的选择器无效；没有section ID。
任何地方都没有id="section"。
@ObsidianAge 他没有选择重复的 ID，所以应该不会影响结果。
重复How do I loop through children objects in javascript?
除了上课之外，您还有什么可以识别家长section的吗？您的文档中是否还有其他sections？您只想要这三个孩子sections，还是还想要可能存在的任何后代sections？

标签： javascript dom

【解决方案1】：

使用queryselector并使用css选择器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>

请记住，id 对于元素应该是唯一的，您可能需要考虑更改部分的 ids。

【讨论】：

【解决方案2】：

使用非唯一的id 就是illegal 会导致很多问题。使用 name 属性代替 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>

【讨论】：