Как добавить новый класс только в первый DIV в этой структуре JS
у меня есть это текстовое поле, когда я добавляю несколько строк из этого текстового поля, затем эти строки добавляются к чему-то вроде этой структуры.
вы можете проверить эти строки с помощью копирования/вставки и вставить в это текстовое поле:
Вопрос-1: Цвет неба...?
Вопрос-2: Бумага поступает из...?
Вопрос-3: Сколько часов в сутках?
Вопрос-4: Жираф - это рыба?
Но теперь мне нужно, чтобы я хотел добавить один дополнительный класс answer только в первую строку, например:
Код моего текстового поля All JS таков:
const sendButton = document.getElementById('send-btn');
const textArea = document.getElementById('input');
const innerDiv = document.getElementById('inner');
var message = textArea.value;
sendButton.addEventListener('click', function() {
// split the textarea entries into an array
let lines = (textArea.value).split("\n");
// iterate over each line, creating a div/span and inserting into the DOM
lines.forEach( (line) => {
let encodedLine = encodeHtmlEntity(line);
let newElement = `<div class = "quiz">${encodedLine}</div>`;
innerDiv.innerHTML += newElement;
});
// reset the textarea
textArea.value = '';
});
function encodeHtmlEntity(input) {
var output = input.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
return '&#' + i.charCodeAt(0) + ';';
});
return output;
}<div id = "inner"> </div>
<textarea class = "input" id = "input" placeholder = "Message..."></textarea>
<button class = "waves-effect waves-light" id = "send-btn">add text</button>Как мне это сделать. пожалуйста, решите мою проблему. Какие дополнительные строки кода мне нужно написать?
Заранее спасибо, люблю тебя.
Второй параметр, предоставленный функции обратного вызова forEach, — это индекс текущего элемента, поэтому с ним вы легко сможете обрабатывать этот первый элемент по-другому.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Попробуйте добавить индекс, а затем использовать его, чтобы сначала условно добавить класс
sendButton.addEventListener('click', function() {
// split the textarea entries into an array
let lines = (textArea.value).split("\n");
// iterate over each line, creating a div/span and inserting into the DOM
lines.forEach( (line,i) => {
let encodedLine = encodeHtmlEntity(line);
let newElement = i===0 ?
`<div class = "quiz answer">${encodedLine}</div>` :
`<div class = "quiz">${encodedLine}</div>`
innerDiv.innerHTML += newElement;
});
// reset the textarea
textArea.value = '';
});
Если вы уверены, что всегда будет хотя бы один элемент класса «викторина»:
document.getElementsByClassName('quiz')[0].classList.add('answer')
[0] представляет первый элемент с классом «викторина».
Примечание: если элемента класса «викторина» вообще нет, то:
document.getElementsByClassName('quiz')[0] === undefined
будет истинным, и строка выдаст такую ошибку:
Cannot read property 'classList' of undefined
Я думаю, что ОП хочет добавить класс непосредственно во время создания элементов div. Предлагаемое вами решение работает для элементов, которые уже присутствуют в DOM.
Аааа, возможно, я неправильно истолковал вопрос, извините. Я понял, что нужно было «как добавить» класс к элементу, а не как родить его с обоими классами. Спасибо
Вы можете сделать что-то вроде этого:
// iterate over each line, creating a div/span and inserting into the DOM
lines.forEach( (line, index) => {
let encodedLine = encodeHtmlEntity(line);
let classList = 'quiz';
if (index === 0) {
classList += ' answer'
}
let newElement = `<div class = "${classList}">${encodedLine}</div>`;
innerDiv.innerHTML += newElement;
});
if (document.getElementsByClassName('classYouNeedToFind')[0]) {
document.getElementsByClassName('classYouNeedToFind')[0].classList.add('classYouNeedToAdd');
}
Если только чтобы избежать ошибок, если нет элемента с классом. И в jQuery
$('.classYouNeedToFind').eq(0).addClass('classYouNeedToAdd');
Нет, если это необходимо в jQuery.
действительно очень хороший вопрос.