Не удается получить последний дочерний элемент div
Я пытаюсь получить последнего ребенка <div>, но у меня ничего не получается. Вот код, который я использую для этого, но он всегда возвращает undefined.
$('#output:last-child').attr('class');
Что случилось? Как я могу это исправить?
Это должен быть последний элемент:
<div class='hisout ${hisclass}'><p class = "he">` + message + '</p></div>
что такое хтмл? может быть последний ребенок не имеет атрибута класса.
Измените его на $("#output:last").
Использование # для идентификатора, который должен быть уникальным. Является ли output классом или идентификатором в атрибутах элементов?
Выход @seantunwin является родительским div, поэтому это идентификатор
нет div с id = "output".. что-то вроде <div id='output' class='hisout ${hisclass}'><p class = "he"> + сообщение + '</p></div>`
Нет <div id = "output"><div class='hisout ${hisclass}'><p class = "he"> + сообщение + '</p></div></div>` вот так
Ваш селектор говорит найти элемент, который имеет выходной идентификатор и является последним дочерним элементом.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Ваш селектор извлекает элемент #output, который является является последним дочерним элементом его родителя.
Судя по описанию, вы хотите найти последнего дочернего элемента в пределах#output, поэтому вам нужно разделить селекторы:
$('#output div:last-child').attr('class');
Что бы это вернуло за <div id = "output"><div class = "foo"><div class = "bar"></div></div></div>?
я думаю, что это вернет 'foo'
Вероятно, это не то, чего хочет ОП :), но они указали свой HTML в вопросе. В этом случае подход @seantunwin с дочерним селектором будет более надежным.
@RoryMcCrossan в этом коде: document.onfocus = () => { console.info($('#output div:last-child').attr('class')) } он регистрируется дважды каждый раз и возвращает undefined в первый раз, когда я отправляю сообщение через socket.io (socket.io). Зачем?
Причин такого поведения может быть много. Я бы предложил начать новый вопрос об этом, включая полный пример кода
Вы можете попробовать использовать функции children() и last():
$('#output').children().last().attr('class')
Чтобы специально отфильтровать тип дочернего элемента, вы можете указать тип в вызове children():
...children('div')...
Однако использование селектора может быть быстрее.
$.last() возвращает последний элемент коллекции jQuery. Для селектора jQuery, выбирающего через id, коллекция всегда будет иметь только один элемент. Таким образом, независимо от того, сколько элементов с id = "output" на странице (если это хотя бы один), $('#output').last() === $('#output') будет true.
Используйте селектор дочернего комбинатора:
$('#output > :last-child').attr('class');
Обновлено: добавлен пример
#output > :last-child {
height: 20px;
width: 20px;
background: red;
border: 1px solid green;
}<div id = "output">
<div>....</div>
<div>....</div>
<div>....</div>
</div>
Пожалуйста, покажите исходный код HTML.