Получение последнего имени класса простым js

1

Кажется, я не могу найти сообщение, связанное с этой темой здесь или на других сайтах, которые не основаны на 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>

НОТА:

Проблема решена, посмотрим на мой ответ, и Александр Нид ответил, чтобы лучше понять ответ.

  • 3
    use var someElementsItems = document.querySelectorAll(".name"); console.log(someElementsItems[someElementsItems.length -1])
Теги:

3 ответа

5
Лучший ответ

Вы могли бы захватить имена в одном запросе, а затем просто захватить указателем общей длины минус 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>
Поделиться
  • 0
    Спасибо за ответ, я на самом деле заинтересовался вашим примером, но я не мог поставить его в качестве предупреждения, он просто говорит [object HTMLHeadingElement] после того, как я поставил этот let names = document.querySelectorAll ('. Name'); let last = names [names.length-1]; оповещения (последний);
  • 0
    Я понял, пусть names = document.querySelectorAll ('. Name'); let last = names [names.length-1]; оповещения (last.innerHTML); Спасибо, что помогли мне. Скоро я вознаградлю кого-нибудь за лучший ответ. Мне нужно посмотреть, чей ответ мне нравится больше, я скоро перезвоню вам, ребята.
4

Следующий код использует трюк, потому что возвращаемое 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>
Поделиться
  • 1
    Yep-- Я попробовал это то же самое с .pop , прежде чем заново , что querySelectorAll возвращение Array- как , но не фактический массив. :) Умная идея преобразовать его в массив таким способом. Кстати, если вы можете избежать синтаксиса ES6, вы можете сделать это с помощью оператора распространения .
  • 0
    Это правда, я всегда помню об операторе спреда слишком поздно.
Показать ещё 2 комментария
1

Я не могу решить, какой метод лучше всего подходит для меня между Александром Нид и Джехтом, потому что я в равной степени люблю оба метода советников, но в определенных ситуациях я буду использовать один метод над

Другой. Поэтому я собираюсь решить лучший ответ, посоветовавшись с Джехтом о проблемах с производительностью, поэтому Александр Нид, я вознагражу вас за лучший ответ.

Если кто-то особенно новичок пытается понять, как получить значение и вывести его в различных методах, таких как метод 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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню