Question

我在HTML页面中有以下div：

<div class="foo">Bar</div>
<div class="foo">Baz</div>

我希望得到一个包含两个div s中包含的文字的数组：

['Bar', 'Baz']

我可以使用d3.nodes执行此操作，但似乎有点笨拙。有更聪明的方法吗？

d3.selectAll(".foo").nodes().map(function(d) { return d.innerHTML; });

当然，答案可能是纯粹的Javascript！

Answer 1

var text = [];
document.querySelectorAll(".foo").forEach(function(e){
    text.push(e.textContent);
});

Answer 2

使用vanilla JavaScript（ES6）很容易实现这一点：

let elements = document.querySelectorAll('.foo')

let texts = []

for(let element of elements) {
    texts.push(element.innerText.toLowerCase())
}

console.log(texts)

这会输出["bar", "baz"]，可以看到here。

ES5 version：

var elements = document.querySelectorAll('.foo')

var texts = []

elements.forEach(function(element) {
    texts.push(element.innerText.toLowerCase())
})

console.log(texts)

Answer 3

鉴于对原帖的一些评论，这似乎是最简单的方法（到目前为止！）。

使用selection.nodes()可以访问选择背后的DOM元素：

var fooDivs = d3.selectAll(".foo").nodes()

现在，您可以使用本机JavaScript Array.map来获取您心中所需的任何HTML / CSS属性：

fooDivs.map(function(d) { 
    return d.innerHTML;
});

或者，对于喜欢单行的人：

d3.selectAll(".foo").nodes().map(function(d) { return d.innerHTML; });

Answer 4

这个问题答案非常简单，您必须使用d3.selectAll()和text功能，如下所示：

var array=[];
d3.selectAll(".foo").each(function(d,i){
   array.push(d3.select(this).text());
});

从选择中

4 个答案: