javascript - 在每个 div X 中选择 #2 元素

Question

我正在尝试制作一个脚本，它将像这样更改每次出现的内容:

<div id="random numbers">
<div class="column-1"></div>
<div class="column-1"><a href="...">this value I want to change</a></div>
<div class="column-1"></div>
</div>

有很多^

到目前为止，这是我尝试使用的代码:

var elements = document.querySelectorAll('column-1');

for ( var i=elements.length; i--; ) {
    elements[ i ].InnerHTML = "test";
}

但这行不通，我真的只是想拼凑一些代码来替换每个 <div id="random numbers"> 的 #2 column-1| 的内容。

非常感谢这里的任何帮助，在此先感谢

Answer 1

上面的代码有两个问题。首先，您的 .querySelectorAll() 应该针对类；您需要指定句号。二、i在 .innerHTML 需要小写。

修复这两个错误后，您只能通过运行基于 modulo 的条件将更改应用于每个 second 元素 共 2 个使用 i % 2如下:

var elements = document.querySelectorAll('.column-1');
for (var i = 0; i < elements.length; i++) {
  if (i % 2) {
    elements[i].innerHTML = "OVERRIDDEN";
  }
}

<div id="random numbers">
  <div class="column-1">Should STAY</div>
  <div class="column-1"><a href="...">Should CHANGE</a></div>
  <div class="column-1">Should STAY</div>
</div>

如果您专门针对 <a>标签，你可以直接使用 querySelectorAll('.column-1 a')本身，使用 .outerHTML 如果你想更换 <a>标记自己。请注意，这不需要条件:

var elements = document.querySelectorAll('.column-1 a');
for (var i = 0; i < elements.length; i++) {
  elements[i].outerHTML = "OVERRIDDEN";
}

<div id="random numbers">
  <div class="column-1">Should STAY</div>
  <div class="column-1"><a href="...">Should CHANGE</a></div>
  <div class="column-1">Should STAY</div>
</div>

希望对您有所帮助! :)