Question

当我在控制台中使用此代码时：

document.querySelectorAll("a.pointer[title='Average']")

它返回一个平均值列表，每个平均值在页面上显示文字：

<a class="pointer" title="Average" onclick="showScoretab(this)">421.95</a>
<a class="pointer" title="Average" onclick="showScoretab(this)">225.02</a>
<a class="pointer" title="Average" onclick="showScoretab(this)">292.51</a>

我如何将所有这些文字更改为"0"？我已经尝试过了：

document.querySelectorAll("a.pointer[title='Average']").textContent = "0";
document.querySelectorAll("a.pointer[title='Average']").innerHTML = "0";
document.querySelectorAll("a.pointer[title='Average']").text = "0";

Answer 1

您必须为此目的使用循环，例如使用for循环：

var links = document.querySelectorAll("a.pointer[title='Average']");

for (var i=0; i < links.length; i++) {
    links[i].innerHTML = '0';
}

<a class="pointer" title="Average" onclick="showScoretab(this)">421.95</a><br>
<a class="pointer" title="Average" onclick="showScoretab(this)">225.02</a><br>
<a class="pointer" title="Average" onclick="showScoretab(this)">292.51</a>

但是因为你使用jQuery可能就像：

$("a.pointer[title='Average']").text('0');

希望这有帮助。

$("a.pointer[title='Average']").text('0');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="pointer" title="Average" onclick="showScoretab(this)">421.95</a>
<br>
<a class="pointer" title="Average" onclick="showScoretab(this)">225.02</a>
<br>
<a class="pointer" title="Average" onclick="showScoretab(this)">292.51</a>

Answer 2

document.querySelectorAll返回一个节点列表，而不仅仅是一个对象。只需遍历每个对象并设置每个对象的属性：

var objects = document.querySelectorAll("a.pointer[title='Average']");
for (var i in objects) {
  object[i].innerHTML = "0";
}

Answer 3

获取length的总<a class="pointer" title="Average" onclick="showScoretab(this)">并执行for循环，并在循环内部，将元素的innerHTML设置为0

var pointers = document.querySelectorAll("a.pointer[title='Average']");

for(var i = 0; i < pointers.length; i++){
  pointers[i].innerHTML = "0";
}

<a class="pointer" title="Average" onclick="showScoretab(this)">421.95</a>
<a class="pointer" title="Average" onclick="showScoretab(this)">225.02</a>
<a class="pointer" title="Average" onclick="showScoretab(this)">292.51</a>

Answer 4

您需要依次访问每个节点。最向后兼容的方法是通过简单的for循环和innerHTML。

var nodes = document.querySelectorAll("a.pointer[title='Average']");

for ( var i = 0; i < nodes.length; ++i )
  nodes[i].innerHTML = "0";

<a class="pointer" title="Average" onclick="showScoretab(this)">421.95</a>
<a class="pointer" title="Average" onclick="showScoretab(this)">225.02</a>
<a class="pointer" title="Average" onclick="showScoretab(this)">292.51</a>

Answer 5

由于你有jQuery作为这个问题的标签，我会假设你很乐意使用它。

$("a.pointer[title='Average']").text("0");

那应该直接编辑文本节点。

https://jsfiddle.net/ddoticus/81wx7q4n/

如何更改节点列表的文本

5 个答案: