Question

如果我有一个包含四个孩子的列表：

<ul id="foo">
    <li id="1"></li>
    <li id="2"></li>
    <li id="3"></li>
    <li id="4"></li>
</ul>

我需要做些什么来获得所有孩子的身份？

我精心设计了这样一个函数：

function bar() {
  children = document.getElementById('foo');
  childArr = [children[0], children[1], children[2], children[3]]
  console.log(childArr.map(x=>x.id));
}

但它非常丑陋，我想这会有更简单的方法来处理它。

Answer 1

但它非常丑陋，我想可以更方便地处理它。

使用最新的ES6语法可以缩短代码，因为代码中使用了箭头函数，我假设代码将在支持EcmaScript 6的环境中执行。

在DOM元素列表中使用Array.from()将允许迭代元素，并且可以在其上使用map()。

＆＃13;

var ids = Array.from(document.querySelectorAll('#foo li')).map(e => e.id);
console.log(ids);

＆＃13;

<ul id="foo">
    <li id="1"></li>
    <li id="2"></li>
    <li id="3"></li>
    <li id="4"></li>
</ul>

＆＃13;

获取列表中所有子项的ID

1 个答案: