Question

我正在尝试仅将div的内容替换为“替换此内容”。

每个div的内容都是动态创建的，因此我必须检查哪个类需要更改。我尝试过使用for循环，到目前为止，我获得了正确的div，但无法更改其内容。主要问题是它们都具有相同的类。如何在不更改其他文本的情况下将新文本放入正确的div？

var x = document.getElementsByClassName("class_name");
var teststring = "rep";

for (i = 0; i < x.length; i++) {
  if (x[i].toString().indexOf(teststring) > 0) {
    this.innerHTML = "text3";
  }
}

<div class="class_name">
  text1
</div>
<div class="class_name">
  text2
</div>
<div class="class_name">
  replace this
</div>

Answer 1

在for循环中使用let声明变量，这将在花括号（{...}）中创建自己的作用域。代替使用this，将当前元素与x[i]一起使用。 x[i]是指元素本身，您必须从元素中获取内容。

我更喜欢textcontent而不是innerHTML

var x = document.getElementsByClassName("class_name");
var teststring = "rep";

for (let i = 0; i < x.length; i++) {
  if (x[i].textContent.indexOf(teststring) > 0) {
    x[i].textContent = "text3";
  }
}

<div class="class_name">
  text1
</div>
<div class="class_name">
  text2
</div>
<div class="class_name">
  replace this
</div>

Answer 2

使用x[i].innerHTML而不是this.innerHTML

var x = document.getElementsByClassName("class_name");
var teststring = "rep";

for (i = 0; i < x.length; i++) {
    if(x[i].innerHTML.indexOf(teststring) !== -1) {
    x[i].innerHTML = "text3";
}
}

演示 https://jsfiddle.net/0cmz4pvk/5/

根据内容用相同的类替换div的innerHTML

2 个答案: