Javascript：遍历数组并修改数组内的项目

Question

我正在尝试在我的页面上设置一个函数，该函数将遍历一系列新闻标题，如果标题包含特定标记，则会删除标题。

标题从 WordPress 帖子数据库中提取并显示在 <div> 和 ID="news" 中。每个特定标题都是<a> 与class="title" 的链接。 我首先将所有标题收集到一个数组中，以便可以遍历它们，但由于某种原因，它无法正常工作。

我的代码是：

<script type="text/javascript">
//first I create the array
var test_DOM = document.getElementById("news").getElementsByClassName("title");
//then I set the marker
var marker = "[X]"
//then I wirte the function to iterate through the array://
function checkX() {
for(i in test_DOM){
if (i.includes(marker)) {
i = "<del>", i, "</del>";
console.log(test_DOM[i], "changed")
}
console.log(test_DOM[i].innerHTML)
}
};
//and I call the function
checkX()

预期的结果是看到要更改的新闻列表

[x] News 1
[EG] News 2

到

[x] News 1 <- struck through
[EG] News 2 <- still the same

但是，什么也没有发生。我知道 getElementsByClassName 给我一个对象数组，我应该使用 .innerHTML 和一些点，但是在函数中使用它，比如

function checkX() {
for(i in test_DOM){
if (i.innerHTML.includes(marker)) {
i.innerHTML = "<del>", i, "</del>";
console.log(test_DOM[i], "changed")
}
console.log(test_DOM[i].innerHTML)
}
};

给出“TypeError: i.innerHTML is undefined”的错误

Answer 1

我想我了解您想要做什么，并为您提供了解决方案。有一些事情需要更新才能使脚本按照您的描述工作：

1. 您的 DOM 查询可以使用 document.querySelectorAll 缩短。
2. 使用String.includes() 时，区分大小写。这意味着[x] 不等于[X]，因此请务必检查正确的版本以进行测试。
3. 正如@2pha 在他们的评论中提到的，test_DOM 将返回一个NodeList，这是一个类似数组的结构，但不完全是一个数组。要将其转换为可以按您的意愿循环的数组，您可以使用[].slice.call(test_DOM)。
4. 正如@VLAZ 在他们的评论中提到的，逗号运算符不会组合字符串。您应该使用'string' + 'string' 语法来组合字符串。
5. 正如@VLAZ 所提到的，for...in 循环更适用于对象，其中它将输出对象的键，而不是值，因此这不适合您的用例。您可以改用Array.forEach()。
6. 正如您所提到的，Array.includes() 检查应使用innerHTML 进行检查，然后应使用innerHTML 重置元素的值。

我在下面添加了一个带有一些修改的 sn-p。

var test_DOM = document.querySelectorAll('#news .title');
var marker = '[x]';

function checkX() {
  [].slice.call(test_DOM).forEach(function(elem, i) {
    if(elem.innerHTML.includes(marker)) {
      elem.innerHTML = '<del>' + elem.innerHTML + '</del>';
    }
  });
}

checkX()

<div id="news">
  <h1 class="title">[x] News 1</h1>
  <h1 class="title">[EG] News 2</h1>
</div>

Answer 2

继续我的评论。
IE。 “getElementsByClassName() 返回一个“NodeList”对象，而不是预期的数组”。但确实有一个长度属性。
对代码进行最小的更改即可使其正常工作。

//first I create the array
var test_DOM = document.getElementById("news").getElementsByClassName("title");
//then I set the marker
var marker = "[X]"
//console.log(test_DOM);
//then I wirte the function to iterate through the array://
function checkX() {
  for(i = 0; i < test_DOM.length; i++){
    if (test_DOM[i].innerHTML.includes(marker)) {
      test_DOM[i].innerHTML = "<del>" + test_DOM[i].innerHTML + "</del>";
      //console.log(test_DOM[i], "changed")
    }
    //console.log(test_DOM[i].innerHTML)
  }
};
//and I call the function
checkX();

<div id="news">
<h2 class="title">title 1</h2>
<h2 class="title">[X]title 2</h2>
<h2 class="title">title 3</h2>
</div>