Как получить значения всех элементов с одним классом?

Question

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

Если бы мне помогала такая документация, я бы не спрашивал тут ответа. Я по ней уже пытался работать, но руки кривые, или я не то делаю, не знаю. Как достать значения из элементов, которые находятся под такой структурой? Значения Name Float Price? https://jsfiddle.net/590zdvb2/1/ — Disrespector, May 12 '20 at 20:10

score 2 · Answer 1 · answered May 12 '20 at 20:57

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>

answered May 12 '20 at 20:57

meine

7,394

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

Денис Степанов · Answer 2 · 2020-05-12T23:07:09.100

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>

edited May 12 '20 at 23:07

answered May 12 '20 at 20:57

Денис Степанов

3,867

2

.map(({dataset}) => dataset)) – Alexander Lonberg May 12 '20 at 22:51
@Alexander Lonberg, да, спасибо большое, дополню ответ :) – Денис Степанов May 12 '20 at 22:59
1

Вспомнил еще - если много data- и необходимо вытащить только некоторые, можно так .map(({dataset:d={id, src}}) => d)) – Alexander Lonberg May 12 '20 at 23:11
Ого, признаюсь честно, первый раз такое вижу. Довольно интересно, спасибо) – Денис Степанов May 12 '20 at 23:13
@Alexander Lonberg, в данном случае, насколько я понимаю, запись вида .map(({dataset:d={id, src}}) => d)) не сработает, поскольку dataset имеется в деструктурируемом обьекте. А данная запись говорит возьми {id, src}, если dataset === undefined – Денис Степанов May 12 '20 at 23:23
Но можно преобразовать в запись вида .map(({dataset, d={id:dataset.id}}) => d)), она работает) – Денис Степанов May 12 '20 at 23:28
dataset есть всегда и это объект. Далее мы это можем переименовать переменную, это делается так dataset: newName, но так как это объект мы его деструктурируем в несколько свойств-переменных {dataset:{id, src}. А теперь чтоб не перетаскивать их в тело функции, присваиваем новой переменной d={id, src} – Alexander Lonberg May 12 '20 at 23:32
@Alexander Lonberg, все таки я склоняюсь к тому, что запись dataset: newName это переименование, dataset=100 - деструктуризация со значением по умолчанию. А dataset: newName=100 переименование со значением по умолчанию. Прошу прощения, чат создал случайно, у меня к нему даже доступа нет. – Денис Степанов May 12 '20 at 23:49
Денис, я не прав. Запарился от бессоницы и даже не проверил. Это действительно параметр по умолчанию. Тогда только так .map(({dataset:{id, src}}) => ({id, src}))). Я применял это совсем по другому ({prop:{...}}, d={...}), когда надо было определить переменные вне тела функции. Но с Array.map такого не прокатит. Каюсь :( – Alexander Lonberg May 13 '20 at 00:40

Как получить значения всех элементов с одним классом?

2 Answers2