Имеется страница, на которой есть множество элементов с одинаковыми классами, с которых нужно вытащить значения классов "data-id=", "data-float=", "data-original-title" для каждого элемента отдельно. Опыта вообще не имею, но очень хочу понять как оно работает. Буду премного благодарен за помощь. Скрин структуры страницы ниже. По сути это нужно, чтобы полученные данные сравнить с переменной и при совпадении одного из элементов с ней - покрасить фон, к примеру
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>
-
-
@ДенисСтепанов, к чему вопрос? какой ответ Вы ожидаете на него получить?– meine12 мая 2020 в 21:37
-
ну просто у
NodeList
же есть свойforEach
. Просто, может быть, у них какие-то различия, из-за чего вы решили его преобразовать. 12 мая 2020 в 21:41 -
@ДенисСтепанов, в данном случае, в принципе, не имеет значение(нет фильтра и т.д.), если углубляться, то там уже нужно развивать тему про "живой" и "статичный" список (NodeList, HTMLCollection), где-то я уже видел на форуме подобный вопрос– meine12 мая 2020 в 21:59
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>
-
2
-
-
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
element.getAttribute('my-attribute');