0

Имеется страница, на которой есть множество элементов с одинаковыми классами, с которых нужно вытащить значения классов "data-id=", "data-float=", "data-original-title" для каждого элемента отдельно. Опыта вообще не имею, но очень хочу понять как оно работает. Буду премного благодарен за помощь. Скрин структуры страницы ниже. По сути это нужно, чтобы полученные данные сравнить с переменной и при совпадении одного из элементов с ней - покрасить фон, к примеруструктура страницы

3
  • документация
    – meine
    12 мая 2020 в 19:27
  • Если бы мне помогала такая документация, я бы не спрашивал тут ответа. Я по ней уже пытался работать, но руки кривые, или я не то делаю, не знаю. Как достать значения из элементов, которые находятся под такой структурой? Значения Name Float Price? jsfiddle.net/590zdvb2/1 12 мая 2020 в 20:10
  • element.getAttribute('my-attribute');
    – meine
    12 мая 2020 в 20:51

2 ответа 2

2

const output = [];

[...document.querySelectorAll('.list__item')].forEach(item => {
  output.push({
    price: item.getAttribute('data-price'),
    float: item.getAttribute('data-float')
  });
});

console.log(output);
<ul class="list">
  <div class="list__item" data-price="100" data-float="1">1</div>
  <div class="list__item" data-price="200" data-float="2">2</div>
  <div class="list__item" data-price="300" data-float="3">3</div>
</ul>

4
  • Зачем вы преобразовали NodeList в массив? 12 мая 2020 в 21:08
  • @ДенисСтепанов, к чему вопрос? какой ответ Вы ожидаете на него получить?
    – meine
    12 мая 2020 в 21:37
  • ну просто у NodeList же есть свой forEach. Просто, может быть, у них какие-то различия, из-за чего вы решили его преобразовать. 12 мая 2020 в 21:41
  • @ДенисСтепанов, в данном случае, в принципе, не имеет значение(нет фильтра и т.д.), если углубляться, то там уже нужно развивать тему про "живой" и "статичный" список (NodeList, HTMLCollection), где-то я уже видел на форуме подобный вопрос
    – meine
    12 мая 2020 в 21:59
2

console.log([...document.querySelectorAll(".just4fest")].map(e => ({
  dataId: e.getAttribute('data-id'),
  dataSrc: e.getAttribute('data-src')
})));
<div class="just4fest" data-id="1" data-src="https://ru.stackoverflow.com/questions/1"></div>
<div class="just4fest" data-id="2" data-src="https://ru.stackoverflow.com/questions/2"></div>
<div class="just4fest" data-id="3" data-src="https://ru.stackoverflow.com/questions/3"></div>
<div class="just4fest" data-id="4" data-src="https://ru.stackoverflow.com/questions/4"></div>
<div class="just4fest" data-id="5" data-src="https://ru.stackoverflow.com/questions/5"></div>
<div class="just4fest" data-id="6" data-src="https://ru.stackoverflow.com/questions/6"></div>

Как верно подметил @Alexander Lonberg, запись можно сократить, используя деструктуризацию. В таком случае вы получите все атрибуты с префиксом data-.

console.log([...document.querySelectorAll(".just4fest")].map(({dataset}) => dataset));
<div class="just4fest" data-id="1" data-src="https://ru.stackoverflow.com/questions/1"></div>
<div class="just4fest" data-id="2" data-src="https://ru.stackoverflow.com/questions/2"></div>
<div class="just4fest" data-id="3" data-src="https://ru.stackoverflow.com/questions/3"></div>
<div class="just4fest" data-id="4" data-src="https://ru.stackoverflow.com/questions/4"></div>
<div class="just4fest" data-id="5" data-src="https://ru.stackoverflow.com/questions/5"></div>
<div class="just4fest" data-id="6" data-src="https://ru.stackoverflow.com/questions/6"></div>

9
  • 2
    .map(({dataset}) => dataset)) 12 мая 2020 в 22:51
  • @Alexander Lonberg, да, спасибо большое, дополню ответ :) 12 мая 2020 в 22:59
  • 1
    Вспомнил еще - если много data- и необходимо вытащить только некоторые, можно так .map(({dataset:d={id, src}}) => d)) 12 мая 2020 в 23:11
  • Ого, признаюсь честно, первый раз такое вижу. Довольно интересно, спасибо) 12 мая 2020 в 23:13
  • @Alexander Lonberg, в данном случае, насколько я понимаю, запись вида .map(({dataset:d={id, src}}) => d)) не сработает, поскольку dataset имеется в деструктурируемом обьекте. А данная запись говорит возьми {id, src}, если dataset === undefined 12 мая 2020 в 23:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.