嵌套For循环错误匹配subtitle与subdescription数组的问题解决

你的问题很明确：现在每个subtitle（h3标题）都对应了所有的subdescription段落，这是因为你用了两层嵌套循环，外层遍历所有标题，内层遍历所有描述，导致每个标题都会把所有描述重复输出一遍。

问题代码拆解 #

你当前的循环逻辑是这样的：

for (var j = 0; j < subtitles.length; j++) {
  // 外层循环：遍历每一个subtitle
  for (var k = 0; k < subdescriptions.length; k++) {
    // 内层循环：遍历每一个subdescription
    html += "<h3>" + subtitles[j].innerHTML + "</h3>";
    html += "<p>" + subdescriptions[k].innerHTML + "</p>";
  }
}

这就会造成：第一个subtitle输出时，会把所有subdescription都输出一遍；第二个subtitle输出时，又重复一遍所有描述，完全不符合你“一一对应”的需求。

修正方案：单循环索引匹配 #

因为你的XML结构里，subtitle和subdescription是按顺序一一对应的（第一个subtitle对应第一个subdescription，第二个对应第二个），所以只需要用同一个索引去取对应的标题和描述即可，去掉内层循环：

for (var j = 0; j < subtitles.length; j++) {
  // 先检查对应索引的subdescription是否存在，避免索引越界报错
  if (subdescriptions[j]) {
    html += "<h3>" + subtitles[j].innerHTML + "</h3>";
    html += "<p>" + subdescriptions[j].innerHTML + "</p>";
  }
}

原理说明 #

通过step.querySelectorAll('subtitle')和step.querySelectorAll('subdescription')获取的数组，元素顺序和它们在XML中的出现顺序完全一致，所以同一个索引j对应的就是同一组的标题和描述，这样就能实现你预期的“第一个h3对应第一个段落、第二个h3对应第二个段落”的效果。

如果你的XML可能存在subtitle和subdescription数量不匹配的情况，上面的if (subdescriptions[j])判断可以避免出现undefined或者索引越界的错误。

内容的提问来源于stack exchange，提问作者crin