Блог

Главная - Вопросы по программированию - Создайте и выделите элемент с помощью цикла For of в JavaScript

Создайте и выделите элемент с помощью цикла For of в JavaScript

#javascript

#javascript

Вопрос:

Как мы можем создавать элементы в цикле?. У меня есть позиции со мной, и при загрузке страницы я хочу выделить слова в этих позициях, обернув теги. Ниже приведен мой код

 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 записи. Помощь будет оценена.

введите описание изображения здесь

Комментарии:

1. Привет, может, вы также поделитесь тем, как выглядят данные?

2. Можете ли вы также добавить свой html-код, чтобы сделать его понятным?

3. и у меня есть данные, подобные позициям, например: 0 => 121,145 1=> [14,19] таким образом, слова в этих позициях я должен выделить, но в моем случае тег <em> добавляется только в одном месте.

4. как вы можете видеть, я вызываю функцию выделения, но после этого, как мне создавать элементы в цикле, это проблема. Извините, но я не могу использовать React и Angular n все

5. данные — это массив или объект?

Ответ №1:

данные представляют собой массив, подобный:

 [
  "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 переменную.

Это не самое элегантное решение, но оно должно выполнять свою работу

Комментарии:

1. Hii Спасибо за ответ, но в моем случае данные представляют собой массив, и он выдает ошибку, например, не удается прочитать раздел свойства undefined

2. можете ли вы создать console.log (данные) и вставить его сюда?

3. Этот код выполняется, но не выделяет слова для (var x данных) { alert(); var jsondata = x «; var nameArr = jsondata.split(‘,’); console.log(‘когда x равно’, x); console.log(‘nameArr равно’, nameArr); var a = nameArr[0]; var b = nameArr[1]; выделите($(‘.main-detail-content’), a, b); var ra = s.getRangeAt(0); var newNode = document.createElement(«em»); newNode.appendChild(ra.extractContents()); ra.insertNode(newNode); }

4. когда x равно 162 170 143748:5292 nameArr равен (2) [«162», «170»] 143748:5291 когда x равно 83,91 143748:5292 nameArr равно (2) [«83», «91»]

5. код hii @brein работает нормально, но опять же выделяется только первый