Кажется, я не могу найти сообщение по этой теме здесь или на других веб-сайтах, не основанных на jQuery. Мне нужно простое решение на JavaScript, чтобы делать то, что мне нужно.
ОК, поэтому мне нужно получить последний элемент имени класса, не используя что-то вроде этого
document.querySelectorAll('.name')[7].innerHTML;
Мне нужен метод, который не требует от меня подсчета и выбора последнего имени класса по числу в квадратных скобках, как в примере выше. Причина в том, что, скажем так, я
иметь 100 элементов на странице с именем вызова имени класса, я бы не хотел использовать приведенную выше структуру примера для этой ситуации.
Мой код, в котором я застрял
//????? I will like the last class name to be outputted in a alert but how?
/*alert(last_class_name);*/
<h1 class='name'>Adam</h1>
<h1 class='name'>Bob</h1>
<h1 class='name'>Cindy</h1>
<h1 class='name'>Danny</h1>
<h1 class='name'>Eddy</h1>
<h1 class='name'>Frank</h1>
<h1 class='name'>George</h1>
<h1 class='name'>Henry</h1>
ЗАМЕТКА:
Проблема решена, посмотрите мой ответ и ответ Александра Нида, чтобы лучше понять ответ.
Вы можете получить имена в одном запросе, а затем просто взять их по индексу общей длины минус 1, как показано ниже:
let names = document.querySelectorAll('.name');
let last = names[names.length-1];
console.info(last);
<h1 class='name'>Adam</h1>
<h1 class='name'>Bob</h1>
<h1 class='name'>Cindy</h1>
<h1 class='name'>Danny</h1>
<h1 class='name'>Eddy</h1>
<h1 class='name'>Frank</h1>
<h1 class='name'>George</h1>
<h1 class='name'>Henry</h1>
Спасибо за ответ. Мне действительно был интересен ваш пример, но я не мог поместить его в предупреждение, он просто говорит [объект HTMLHeadingElement] после того, как я поместил это let names = document.querySelectorAll ('. Name'); пусть фамилия = имена [имена.длина-1]; оповещение (последнее);
Я понял let names = document.querySelectorAll ('. Name'); пусть фамилия = имена [имена.длина-1]; оповещение (last.innerHTML); Спасибо, что помогли мне. Я скоро награжу кого-нибудь за лучший ответ. Мне нужно посмотреть, ответ какого человека мне больше нравится. Я скоро вернусь к вам, ребята.
Следующий код использует уловку, потому что то, что возвращает document.querySelectorAll()
, является NodeList и не имеет обычных функций массива, такого как .pop()
.
Этот трюк преобразует NodeList
в Array
, так что вы можете вызывать .pop()
.
Другой способ сделать это - тот же, что прокомментировал Александр Нид незадолго до того, как мне удалось закончить этот ответ.
let arr = [].slice.apply(document.querySelectorAll('.name'));
let lastEl = arr.pop();
console.info(lastEl.innerHTML);
<h1 class='name'>Adam</h1>
<h1 class='name'>Bob</h1>
<h1 class='name'>Cindy</h1>
<h1 class='name'>Danny</h1>
<h1 class='name'>Eddy</h1>
<h1 class='name'>Frank</h1>
<h1 class='name'>George</h1>
<h1 class='name'>Henry</h1>
Редактировать
Александр напомнил мне о Оператор распространения в ES6, который может превратить этот код в
let arr = [...document.querySelectorAll('.name')];
let lastEl = arr.pop();
console.info(lastEl.innerHTML)
<h1 class='name'>Adam</h1>
<h1 class='name'>Bob</h1>
<h1 class='name'>Cindy</h1>
<h1 class='name'>Danny</h1>
<h1 class='name'>Eddy</h1>
<h1 class='name'>Frank</h1>
<h1 class='name'>George</h1>
<h1 class='name'>Henry</h1>
Да - я пробовал то же самое с .pop
, прежде чем снова обнаружил, что возвращаемый querySelectorAll
- это Array-нравиться, но не реальный массив. :) Замечательная идея преобразовать его в массив таким образом. Между прочим, если вы можете обойтись без синтаксиса ES6, вы можете выполнить это с помощью оператора спреда.
Это правда, я всегда слишком поздно вспоминаю об операторе спреда.
Спасибо @Jhecht за то, что тоже помог мне. Мне тоже нравятся твои примеры. Я скоро награжу кого-нибудь за лучший ответ. Мне нужно посмотреть, ответ какого человека мне больше нравится. Я скоро вернусь к вам, ребята.
@fsofb для производительности в больших коллекциях NodeList, я полагаю, что Александр будет выполнен за меньшее время, хотя у меня нет удобного теста, чтобы доказать это.
использовать
var someElementsItems = document.querySelectorAll(".name"); console.info(someElementsItems[someElementsItems.length -1])