Javascript嵌套循环崩溃浏览器

我正在用Django创建一个web应用程序，我需要一些Javascript来更改动态生成元素的样式。我已经将代码简化为静态html和javascript

目标： 导致问题的代码作用于详细信息页。 有许多详细信息页面，每个页面表示来自给定数据库条目的数据。 每个页面将有一个或多个表，具体取决于数据库条目中有多少个蛋白质名称。 对于每个表，我想更改表标题中蛋白质名称条目的颜色以及示例_id条目的颜色

尝试： 我正在使用javascript从顶层标题捕获示例_id，并从表标题捕获蛋白质名称。 然后我捕获表行的nodelist并遍历，查找与蛋白质名称或示例id匹配的条目

问题: 当在嵌套循环中遍历从表头中获取的蛋白质名称的节点列表时，页面永远不会加载

HTML:

---

您的内部循环以

var i

开始，因为作用域在JavaScript中是如何工作的，它将与外部循环相同

i

，并且每次运行内部循环时都会发生更改（因此不会增加外部循环，使其无止境）；就像输入这样：

var i;
for (i = 0; i < length; ++i)
{
    for (i = 0; i < length2; ++i)
    {
        //...
    }
}

---

希望这有助于澄清问题。

您在两个循环中都使用var i

var idTitle = document.getElementsByClassName("msaIdCatcher");
id = idTitle[0].innerHTML;
id = id.replace("Protein Record #", "");

//Get protein_names from table headers
proteinnameElements = document.getElementsByClassName("msaProtNameCatcher")

//Get table rows
var sequenceidrowElements = document.getElementsByClassName("sequenceidrow");

//Loop through table rows
for (var i = 0; i < sequenceidrowElements.length; i++) {

    //Get sequence id
    var sequenceidElement = sequenceidrowElements[i].getElementsByClassName("sequenceid");
    idElement = sequenceidElement[0].innerHTML

    //Check if ID is ID from page heading
    if (idElement == id) {

        //Get sequence element and change colour of ID and sequence elemnt
        var alignsequenceElement = sequenceidrowElements[i].getElementsByClassName("alignsequence");
        sequenceidElement[0].style.color = "#b80090";
        alignsequenceElement[0].style.color = "#b80090";
    }

    //Loop through protein names in table headers and Check if ID in table matches protein name
    //Then change colour of ID and sequence
    for (var i = 0; i < proteinnameElements.length; i++) {
        proteinname = proteinnameElements[i].innerHTML
        if (idElement == proteinname) {
            var alignsequenceElement = sequenceidrowElements[i].getElementsByClassName("alignsequence");
            sequenceidElement[0].style.color = "red";
            alignsequenceElement[0].style.color = "red";
        }
    }
}

However, when using a single protein name by making proteinname equal to the innerHTML of the first element proteinnameElements and taking away the loop nesting as follows, the page loads in a fraction of a second. 

var idTitle = document.getElementsByClassName("msaIdCatcher");
id = idTitle[0].innerHTML;
id = id.replace("Protein Record #", "");

//Get protein_names from table headers
proteinnameElements = document.getElementsByClassName("msaProtNameCatcher")
proteinname = proteinnameElements[0].innerHTML
//Get table rows
var sequenceidrowElements = document.getElementsByClassName("sequenceidrow");

//Loop through table rows
for (var i = 0; i < sequenceidrowElements.length; i++) {

    //Get sequence id
    var sequenceidElement = sequenceidrowElements[i].getElementsByClassName("sequenceid");
    idElement = sequenceidElement[0].innerHTML

    //Check if ID is ID from page heading
    if (idElement == id) {

        //Get sequence element and change colour of ID and sequence elemnt
        var alignsequenceElement = sequenceidrowElements[i].getElementsByClassName("alignsequence");
        sequenceidElement[0].style.color = "#b80090";
        alignsequenceElement[0].style.color = "#b80090";
    }

    //Loop through protein names in table headers and Check if ID in table matches protein name
    //Then change colour of ID and sequence
        if (idElement == proteinname) {
            var alignsequenceElement = sequenceidrowElements[i].getElementsByClassName("alignsequence");
            sequenceidElement[0].style.color = "red";
            alignsequenceElement[0].style.color = "red";
        }
}

Can someone help me understand why nesting loops in this way causes such a large difference in runtime and help me find a way to solve my problem?

Thanks!

var i;
for (i = 0; i < length; ++i)
{
    for (i = 0; i < length2; ++i)
    {
        //...
    }
}

for (let i = 0; i < length; ++i)
{
    //...
}