时间戳

首页 > 解决方案 > 在 JavaScript 中使用 For of Loop 创建和突出显示元素

javascript - 在 JavaScript 中使用 For of Loop 创建和突出显示元素

问题描述

我们如何在循环中创建元素？我有职位，在页面加载时，我想通过换行来突出显示这些职位上的单词标签。下面是我的代码

function highlight(element,st,en){
    range = document.createRange();
    start = st;
    end = en;
    dig(element);
    s.addRange(range);
}
  

for (x of data) {
    var nameArr = jsondata.split(',');
    var a = nameArr[0];
    var b = nameArr[1];
    highlight($('.main-detail-content'), a, b);
    var ra = s.getRangeAt(0);
    var newNode = document.createElement("em");
    newNode.appendChild(ra.extractContents());
    ra.insertNode(newNode);
}

它只突出显示一个单词，但在循环中，我有 4 条记录。帮助将不胜感激。

在此处输入图像描述

标签： javascript

解决方案

数据是一个数组，如：

[
  "162,170",
  "83,91"
]

看起来您在滥用for (x of data)循环，因为您从未使用 x 变量。

您应该执行以下操作：

//need a counter like variable to look at a different selection at every loop
var selectionIterator = 0;

for (var x of data) {
    var nameArr = data[x].split(',');
    console.log('when x is', x);
    console.log('nameArr is', nameArr);

    var a = nameArr[0];
    var b = nameArr[1];
    highlight($('.main-detail-content'), a, b);
    //now it's looking at the last selection every time
    var ra = s.getRangeAt(selectionIterator++);
    var newNode = document.createElement("em");
    newNode.appendChild(ra.extractContents());
    ra.insertNode(newNode);
}

这样，循环的每次迭代中的 nameArr 都会更改为对象中的下一个元素，我已经插入了一些控制台日志，可以帮助您进行调试

编辑：通过查看您的日志，看起来现在它正在正确地迭代数据数组。

此外，它仅突出显示第一个单词，因为您仅在您正在执行的第一个选择中添加新节点，var ra = s.getRangeAt(0);而不是硬编码 0，您应该每次递增计数器，这就是我引入selectionIterator变量的原因。

这不是最优雅的解决方案，但它应该可以完成工作

推荐阅读