Question

我正在努力实现的目标：

我正在尝试将abbr的标题分别更新为“.Left”和“.Right”类中的值。我提出了一个jQuery解决方案，但它在加载时间方面太贵了，我试图想出一个Javascript解决方案，但我被卡住了。我是JS的新手，所以我有很多东西可以学习DOM。

我给的HTML重复了100次（相同的骨架）。如何让我的代码更高效？另外，我得到一个“无法设置null属性标题”的错误。

var ratedSection = document.getElementsByClassName('RatedSection');
var ratedQuest = document.getElementsByClassName('RatedQuest');
var selector = document.getElementsByClassName('Selector');

for (var i = 0; i < ratedSection.length; i++) { //loops through ratedsection
  var left = ratedSection[i].querySelector('.Left');
  var right = ratedSection[i].querySelector('.Right');

  left = left.innerHTML.replace(/<br>/g, " ");
  right = right.innerHTML.replace(/<br>/g, " ");

  for (var j = 0; j < ratedQuest.length; j++) {
    for (var k = 0; k < selector.length; k++) {
      var index = ratedQuest[j].querySelector('input').value;

      if (index == 1)
        selector[k].querySelector('abbr').title = left;

      else if (index == max)
        selector[k].querySelector('abbr').title = right;
    }
  }
}

<table class="RatedSection">
  <tr class="Header">
    <td class="Left">Stuff
      <br>inside
      <br>here
    </td>
    <td class="Right">More
      <br>stuff
      <br>inside
      <br>here
    </td>
  </tr>
  <tr class="RatedQuest">
    <td class="Selector">
      <abbr title>7</abbr>
      <abbr title>1</abbr>
    </td>
  </tr>
</table>

Answer 1

让我们删除一些混乱并查看循环代码：

for(var i = 0; i < ratedSection.length; i++)
  for(var j = 0; j < ratedQuest.length; j++)
    for(var k = 0; k < selector.length; k++)

我猜你想写这个（伪代码）：

FOR EACH section IN PAGE
  FOR EACH quest INSIDE section
    FOR EACH selector INSIDE quest

但你实际上是这样做的：

FOR EACH section IN PAGE
  FOR EACH quest IN PAGE
    FOR EACH selector IN PAGE

循环的每次传递，你都会查看一整页任务/选择项，而不仅仅是当前部分内的那些。您从document获取了对任务和选择器的引用，而不是来自当前部分。

不是迭代100次，而是迭代10000次。当您进入第一个循环时，在节对象上使用querySelector

这个Javascript非常慢

1 个答案: