Question

这是一个代码......

<div id="d1">
 <ol>
  <li id="li1"></li>
  <li id="li2"></li>
 </ol>
<div>

 <script>
   var dod = document.getElementById("d1");
   var foo = dod.getElementsByTagName("*");

    for(i=0;i<foo.length;i++){
       console.log(foo[i].id);
       }
 </script>

如何在Id＆＃39>之间插入逗号？

Answer 1

让我们玩得开心：

console.log(Array.prototype.map.call(document.querySelectorAll("#d1 *"), function(e) {
    return e.id;
}).join(", "));

这本来是一个有点开玩笑的事，但它有一个严肃的核心，并展示了一些方便的东西：

document.querySelectorAll将为您提供与CSS选择器匹配的（已断开连接的）NodeList元素。因此#d1 *为我们提供了#d1。
Array.prototype.map很高兴用于类似数组的任何内容，它不需要您在实际数组中使用它。
Function#call允许您调用函数并告诉它函数调用期间this应该是什么。因此Array.prototype.map.call(document.querySelectorAll("#d1 *"), ...调用map，使其NodeList querySelectorAll this Array.prototype.map。
e.id为每个“array”元素调用一次为它提供的函数，传入元素，并根据返回的内容构建一个新数组。因此，返回id的回调告诉它构建一个Array.prototype.join值的数组。
console.log使用您提供的字符串作为它们之间的分隔符，从数组元素构建一个字符串。

...您从自己的代码中知道id输出它。

但是看一下你的HTML，我们需要将它调整为只有实际具有filter值的元素，否则我们最终会在结果中产生大量空白。这很简单，我们只需添加console.log(Array.prototype.filter.call(document.querySelectorAll("#d1 [id]"), function(e) { return e.id !== ""; }).map(function(e) { return e.id; }).join(", "));：

#d1 [id]

那里有两处变化：

我使用id作为选择器，因此我们只返回了具有.filter属性的元素。
我在.map之前添加了对id的调用，以过滤掉具有<li id="">属性但具有空白值的元素（遗憾的是，无法过滤掉这些属性在CSS中，例如，防御{{1}}）。

Example

Answer 2

一种方式是：

var separator = ", ";
for(i=0;i<foo.length;i++){
   if(i == foo.length - 1) {
      separator = "";
   }

   console.log(foo[i].id + separator);
}

如何在JavaScript中的数组之间添加逗号

2 个答案: