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

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

ЗАМЕТКА:

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

использовать var someElementsItems = document.querySelectorAll(".name"); console.info(someElementsItems[someElementsItems.length -1])

Just code 26.10.2018 07:32
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
306
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете получить имена в одном запросе, а затем просто взять их по индексу общей длины минус 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]; оповещение (последнее);

user9375528 26.10.2018 08:51

Я понял let names = document.querySelectorAll ('. Name'); пусть фамилия = имена [имена.длина-1]; оповещение (last.innerHTML); Спасибо, что помогли мне. Я скоро награжу кого-нибудь за лучший ответ. Мне нужно посмотреть, ответ какого человека мне больше нравится. Я скоро вернусь к вам, ребята.

user9375528 26.10.2018 09:25

Следующий код использует уловку, потому что то, что возвращает 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, вы можете выполнить это с помощью оператора спреда.

Alexander Nied 26.10.2018 07:42

Это правда, я всегда слишком поздно вспоминаю об операторе спреда.

Jhecht 26.10.2018 07:43

Спасибо @Jhecht за то, что тоже помог мне. Мне тоже нравятся твои примеры. Я скоро награжу кого-нибудь за лучший ответ. Мне нужно посмотреть, ответ какого человека мне больше нравится. Я скоро вернусь к вам, ребята.

user9375528 26.10.2018 09:27

@fsofb для производительности в больших коллекциях NodeList, я полагаю, что Александр будет выполнен за меньшее время, хотя у меня нет удобного теста, чтобы доказать это.

Jhecht 26.10.2018 22:59

Другие вопросы по теме