Question

我有以下html：

<div class="topics">
  <span class="topic" data-value="hello">hello</span>
  <span class="topic" data-value="world">world</span>
  <span class="topic" data-value="one">one</span>
  <span class="topic" data-value="two">two</span>
  <span class="topic" data-value="six">six</span>
</div>

如何从每个区块获取价值并合并？结果应该是：

[＆＃34;你好＆＃34;，＆＃34;世界＆＃34;，＆＃34;一个＆＃34;，＆＃34;两个＆＃34;，＆＃34;六＆＃34 ]

我怎样才能实现这一目标？

Answer 1

您将获得跨度并映射文本内容

var text = [].map.call(document.querySelectorAll('.topics span'), function(elem) {
  return elem.textContent; // or elem.dataset.value for the data-attribute
});

console.log(text)

<div class="topics">
  <span class="topic" data-value="hello">hello</span>
  <span class="topic" data-value="world">world</span>
  <span class="topic" data-value="one">one</span>
  <span class="topic" data-value="two">two</span>
  <span class="topic" data-value="six">six</span>
</div>

Answer 2

jQuery

如果您想进入<div>

http://jsfiddle.net/4egmewnv/

Answer 3

由于您已经使用HTML data- 属性来存储数组中所需的值，因此其余的很容易。

只需创建一个 for 循环，迭代每个具有 .topic 类的元素，并推送每个 data-value < / strong>在数组内部。

/* ----- JavaScript ----- */ var array = [], els = document.querySelectorAll("span.topic"); for (var i = 0; i < els.length; i++) array.push(els[i].getAttribute("data-value")); console.log(array);

 <div class="topics"> <span class="topic" data-value="hello">hello</span> <span class="topic" data-value="world">world</span> <span class="topic" data-value="one">one</span> <span class="topic" data-value="two">two</span> <span class="topic" data-value="six">six</span> </div>

Answer 4

你可以使用jquery：

$(".topics .topic").map(function() {
return $( this ).data("value");

}）

在这里演示：

https://fiddle.jshell.net/Flautarian/0n68ao7j/

如何组合数组中的值？

4 个答案: