javascript - For 循环应该查找值是否存在

Question

对于上下文，下面的函数将参数“rank”作为大写字母（例如：“A”）。“#nodeField”是一个 div。

运行代码时，下面的代码将解释输入“rank”并将“h1”附加到“nodeField”。每个“h1”都有一个不同的 id，第一个字母是它的等级，第二个字母是它在等级中的位置（见第 19 和 21 行）。第 8 行的 for 循环应该测试“nodeField”中是否存在下一个等级的“h1”（例如：如果输入等级为“A”，则测试是否存在任何等级为“B”的“h1”） . 如果下一个等级的任何“h1”确实存在，nextNodeRank 应该等于 true（此变量影响第 17 行的 if 语句）。

有谁知道如何修复 for 循环以产生预期的输出？

var alphabet = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
var aI = 0;

function addNode(rank) {
    var kill = false;
    var nextNodeRank = false;

    for (i = 0; i < $("#nodeField>h1").length; i++) {
        if ((kill = false)&&($("#" + alphabet[alphabet.indexOf(rank) + 1] + alphabet[i]).length !== 0)) {
            kill = true;
            nextNodeRank = true;
        }
    }
    
    var newNode = document.createElement("h1");
    newNode.innerHTML = 0;
    if (nextNodeRank == true) {
        aI = 0;
        newNode.id = rank + alphabet[aI];
    } else {
        newNode.id = rank + alphabet[aI];
    }
    
    document.getElementById("nodeField").appendChild(newNode);
    
    aI++;
}

标签： javascriptjqueryfunctionfor-loopif-statement

Answer 1

严格关注您的问题“测试是否h1存在任何下一个等级nodeField”，这可以在不使用属性选择器循环的情况下完成。

let nextRank = alphabet[alphabet.indexOf(rank) + 1]
nextNodeRank = $(`#nodeField>h1[id^="${nextRank}"]`).length

if (nextNodeRank) {
  // There are elements in the nextRank
}

模板文字的附加参考。

function nextRankElements(rank) {
  var alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
  let nextRank = alphabet[alphabet.indexOf(rank) + 1]
  nextNodeRank = $(`#nodeField>h1[id^="${nextRank}"]`).length
  console.log(`${nextNodeRank} elements of rank ${nextRank}`);
}

nextRankElements("A");
nextRankElements("B");
nextRankElements("C");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nodeField">
  <h1 id="AA">1st A</h1>
  <h1 id="BA">1st B</h1>
  <h1 id="BB">2nd B</h1>
  <h1 id="CA">1st C</h1>
</div>

<h1 id="CB">This C won't be counted</h1>