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未定义”

Answer 1

我想我了解您正在尝试做的事情，并为您提供了解决方案。要使脚本按您所描述的那样工作，需要进行一些更新：

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

我在下面添加了一些代码片段，并进行了一些修改。

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

根据我的评论。
即。 “ getElementsByClassName（）返回一个“ NodeList”对象，而不是预期的数组”。但是确实具有length属性。
只需对代码进行最少的更改即可使其正常工作。

//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>

Javascript：遍历数组并修改数组中的项

2 个答案: