Как отобразить последний атрибут индекса данных в указанном теге HTML - PullRequest
Новая
       2

Как отобразить последний атрибут индекса данных в указанном теге HTML

0 голосов
/ 03 августа 2020

Интересно, как я могу поймать последний элемент атрибута данных и показать его значение в определенном теге диапазона. Я прилагаю небольшой код того, как это должно выглядеть:

https://jsfiddle.net/Lkt0jpex/ или здесь (тот же код): 

   <HTML>
     <head>
      <meta charset="utf-8">
      <title></title>
      <meta name="author" content="">
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="css/style.css" rel="stylesheet">
   </head>
   <body>
      <!-- Get last item of data-index attribute -->
      <div class="wq" data-index="18"></div>
      <div class="wq" data-index="19"></div>
      <!-- Display it as a string in span.test -->
      <span class="test">//VALUE OF DATA-INDEX="19"//</span>
      <script src="js/script.js"></script>
   </body>
</html>

Спасибо за вашу помощь!

1 Ответ

1 голос
/ 03 августа 2020

Вы можете использовать селектор CSS :last-of-type внутри querySelector , чтобы получить последний элемент с классом .wq, а затем прочитать индекс через свойство dataset . 

const lastElement = document.querySelector(".wq:last-of-type");
const testElement = document.querySelector(".test");

testElement.textContent = lastElement.dataset.index;
<div class="wq" data-index="18"></div>
<div class="wq" data-index="19"></div>
<!-- Display it as a string in span.test -->
<span class="test">//VALUE OF DATA-INDEX="19"//</span>

Другой вариант - выбрать все элементы с атрибутом data-index и получить значение последнего найденного элемента. 

const lastElement = document.querySelector("[data-index]:last-of-type");
const testElement = document.querySelector(".test");

testElement.textContent = lastElement.dataset.index;
<div class="wq" data-index="18"></div>
<div class="wq" data-index="19"></div>
<!-- Display it as a string in span.test -->
<span class="test">//VALUE OF DATA-INDEX="19"//</span>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...