Question

如何将数组/列表的所有值合并为一行？

html的示例代码：

<div class="projects">
   <span clas="project_title"> project1 </span>
   <span clas="project_title"> project2 </span>
</div>

如果我想取span的值，我必须使用这个

document.querySelectorAll('div.projects span.project_title')[0].textContent

结果：

PROJECT1

document.querySelectorAll('div.projects span.project_title')[1].textContent

结果：

项目2

是否有任何简单的JS查询才能获得此结果而无需迭代到列表中？

示例结果：

project1，project2

Answer 1

没有迭代就无法获得所有这些。但是这种迭代可以在引擎盖下完成。您可以使用 Array#map 来获取textContents。在这种情况下，您需要迭代HTMLElements，这是在 Array#map 的引导下完成的。

＆＃13;

const spans = document.querySelectorAll('div.projects span.project_title');
const texts = Array.prototype.map.call(spans, item => item.textContent);

console.log(texts);

＆＃13;

<div class="projects">
   <span class="project_title"> project1 </span>
   <span class="project_title"> project2 </span>
</div>

＆＃13;

Answer 2

您可以使用Array.prototype.slice.call方法。并使用class更改span类属性字。Array#map用于创建数组。然后使用{{join(',')数组, 1}}

var a = Array.prototype.slice.call(document.querySelectorAll('div.projects span.project_title')).map(a => a.textContent);

console.log(a.join(','))

<div class="projects">
   <span class="project_title"> project1 </span>
   <span class="project_title"> project2 </span>
</div>

获取迭代列表的所有值

2 个答案: