Кажется, я не могу найти сообщение, связанное с этой темой здесь или на других сайтах, которые не основаны на jQuery. Мне нужно простое решение JavaScript, чтобы делать то, что мне нужно.
ОК, поэтому мне нужно получить последний элемент имени класса, не используя что-то вроде этого
document.querySelectorAll('.name')[7].innerHTML;
Мне нужен метод, который не требует, чтобы я подсчитывал и выбирал последнее имя класса по числу count между квадратными скобками, как пример выше. Причина, почему я просто говорю, что я
есть 100s элементов на странице с именем имени класса. Мне бы не хотелось использовать приведенную выше структуру примера для этой ситуации.
Мой код, в котором я застрял
//????? 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.log(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>
Следующий код использует трюк, потому что возвращаемое document.querySelectorAll()
является NodeList и не имеет обычных функций массива, такого как .pop()
.
Этот трюк преобразует NodeList
в Array
чтобы вы могли вызвать .pop()
Другой способ сделать это так же, как Александр Нид прокомментировал, прежде чем мне удалось закончить этот ответ.
let arr = [].slice.apply(document.querySelectorAll('.name'));
let lastEl = arr.pop();
console.log(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>
редактировать
Александр напомнил мне оператора Spread в ES6, который может превратить этот код в
let arr = [...document.querySelectorAll('.name')];
let lastEl = arr.pop();
console.log(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, вы можете сделать это с помощью оператора распространения .
Я не могу решить, какой метод лучше всего подходит для меня между Александром Нид и Джехтом, потому что я в равной степени люблю оба метода советников, но в определенных ситуациях я буду использовать один метод над
Другой. Поэтому я собираюсь решить лучший ответ, посоветовавшись с Джехтом о проблемах с производительностью, поэтому Александр Нид, я вознагражу вас за лучший ответ.
Если кто-то особенно новичок пытается понять, как получить значение и вывести его в различных методах, таких как метод document.write, alert() и т.д., Используя метод Alexander Nied, вот как я это понимаю.
var names = document.querySelectorAll('.name');
var lastClassNameOfName = names[names.length-1].innerHTML;
alert(lastClassNameOfName);
<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>
var someElementsItems = document.querySelectorAll(".name"); console.log(someElementsItems[someElementsItems.length -1])