Question

我正在使用for循环更改innerHTML，但由于实例数量不相同，因此某些值返回的值未定义。如何设置循环以跳过空实例？

这是为了更改同一类的所有实例的内容，实例的数量因类而异。

<!DOCTYPE html>
<html>
<body>

<p class="TEXT1">000</p>
<p class="TEXT1">000</p>
<p class="TEXT2">000</p>
<p class="TEXT3">000</p>
<p class="TEXT3">000</p>
<p class="TEXT3">000</p>
<p class="TEXT4">000</p>
<p class="TEXT5">000</p>
<p class="TEXT5">000</p>
<p class="TEXT5">000</p>
<p class="TEXT5">000</p>


<script>

function CHANGE() {
for (var i = 0; i < 10; i++) {
//"paragraphs" will be different content texts, not just the word with a number.
  document.getElementsByClassName("TEXT1")[i].innerHTML = "Paragraph 1";
  document.getElementsByClassName("TEXT2")[i].innerHTML = "Paragraph 2";
  document.getElementsByClassName("TEXT3")[i].innerHTML = "Paragraph 3";
  document.getElementsByClassName("TEXT4")[i].innerHTML = "Paragraph 4";
  document.getElementsByClassName("TEXT5")[i].innerHTML = "Paragraph 5";
}    
}
CHANGE();
</script>
    </body>
</html>

预期结果是：

第1段

第2段

第3段

第4段

第5段

我得到的实际结果是：

第1段

第2段

第3段

000

第4段

第5段

000

JavaScript控制台：

未捕获的TypeError：无法设置未定义的属性“ innerHTML”

Answer 1

实例的数量因类而异。

您可以检查实例数。

Set WB1 = Workbooks.Open(path & fName & fExt, UpdateLinks:=xlUpdateLinksNever)
        wb.Activate
        Set WB2 = Workbooks.Open(path1 & fName1 & fExt1, UpdateLinks:=xlUpdateLinksNever)

对于多个班级和课文：

for (var el of document.getElementsByClassName("TEXT1"))
  el.innerHTML = "Paragraph 1";

Answer 2

在您的for循环中检查此条件

for(// your loop condition){

      myVar = document.getElementsByClassName("TEXT")[i];

      if (typeof myVar !== 'undefined'){

           continue;

      }


}

Answer 3

您应该改为从classNames开始并搜索匹配的元素。一旦有了这些，就可以对其进行操作

<input class="option" type="radio" name="s1" id="s1_1" checked/>
<input class="option" type="radio" name="s1" id="s1_2"/>
<input class="option" type="radio" name="s1" id="s1_3"/>
<div class="select" tabindex="1">
  <label for="s1_1">Option 1</label>
  <label for="s1_2">Option 2 [!]</label>
  <label for="s1_3">Option 3</label>
</div>
Some text after
<input class="option" type="radio" name="s2" id="s2_1" checked/>
<input class="option" type="radio" name="s2" id="s2_2"/>
<div class="select" tabindex="2" id="s2">
  <label for="s2_1">Option 1</label>
  <label for="s2_2">Option 2</label>
</div>

或者，如果您只是想从类名列表中工作，您可以说

function CHANGE() {
    // define the classnames for TEXT1, TEXT2, ... TEXT6
    for(let i=1;i<=6;i++){
      let className = "TEXT"+i
      // pickup the child elements with the matching class
      let nodes = document.getElementsByClassName(className)
      // change the text
      for(let j=0; j<nodes.length;j++){
        nodes[j].innerHTML="Paragraph "+i
      }
    }   
}

Answer 4

您不应该试图在一个循环中更改所有不同类别的元素，也不应该对循环的长度进行硬编码或在每个循环中重新计算元素列表。试试这个：

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
    if(changeInfo.url != null){
        if (changeInfo.url.includes('csfd.cz')) {
            console.log("ČSFD detected: " + changeInfo.url);
            getNetflixInfo();
        }
    }
});

function getInfo() {

    var xhr = new XMLHttpRequest();
    xhr.open('GET', "https://www.randomurl.com");
    xhr.setRequestHeader('Content-Type', 'text/html');
    xhr.onload = function() {
      if (xhr.status === 200) {
        var altNameStr = "",
            s = xhr.responseText,
            re = /data-title="title"><[^<]+>([^<]+)</gmi,
            item;

        while (item = re.exec(s)) {
            //arr.push(item[1]);
            altNameStr += '|' + item[1];
        }
        console.log(altNameStr);

        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
          chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"});
        });

      }
      else {
          alert('XHR status = ' + xhr.status)
      }
    };
    xhr.send();
}

然后针对要操作的每个不同类的元素重复该操作。或者，为所有这些元素提供一个额外的通用类，然后使用正则表达式确定数字，从而找到并遍历结果。我将使用ES6语法包含此示例，因为它反而更加复杂：

var text1Elements = document.getElementsByClassName("TEXT1");
for (var i = 0; i < test1Elements.length; i++) {
  text1Elements[i].innerHTML = "Paragraph 1";
}

Answer 5

每次调用document.getElementsByClassName时，您都在强制DOM查找和收集这些元素。这会使网站速度变慢。尝试这样的事情：

for (var i=1; i < 6; i++) {
  var elements = document.getElementsByClassName("TEXT" + i);
  for (var element of elements) {
    element.innerHTML = "Paragraph " + i;
  }
}

Answer 6

您正尝试遍历不存在的索引，请尝试以下代码段：

function change() {

    var classes = ['TEXT1', 'TEXT2', 'TEXT3', 'TEXT4', 'TEXT5'];
    var paragraphs = ['Paragraph 1', 'Paragraph 2', 'Paragraph 3', 'Paragraph 4', 'Paragraph 5', ];

    for (var i = 0; i < classes.length; i++) {
        var elements = document.getElementsByClassName(classes[i]);
  
        for (var j = 0; j < elements.length; j++) {
           elements[j].innerHTML = paragraphs[i];
        }
  
    }    
}

window.onload = function() {
  change();
}

<!DOCTYPE html>
<html>
<body>

<p class="TEXT1">000</p>
<p class="TEXT1">000</p>
<p class="TEXT2">000</p>
<p class="TEXT3">000</p>
<p class="TEXT3">000</p>
<p class="TEXT3">000</p>
<p class="TEXT4">000</p>
<p class="TEXT5">000</p>
<p class="TEXT5">000</p>
<p class="TEXT5">000</p>
<p class="TEXT5">000</p>

</body>
</html>

如何避免在JavaScript中的“ for-loop”中出现“ undefined”？

6 个答案: