es6 querySelectorAll a class and get it's data attribute

Question

I am stuck on trying to write a function that would grab the class here in this element

<li class="list-group-item" data-id="1023649435">

And then add a class to it called modify-margin

I'm still relatively new at writing js, don't want to write it in jQuery and use just plain vanilla (or ES6).

I've made some progress with my function however I've got this problem where there is another list item that has the class:

which I don't want to affect that one, just the ones with list-group-item

The solution here would be if the element has dataset id then grab only those, problem is I don't know how to grab datasets. Any help would be greatly appreciated.

Here's what I have so far and I know it's fairly basic. Thank you for the help in advance

  init() {
const elems = document.querySelectorAll('.list-group-item');
console.log('elems', elems);

} }

`elems` is a NodeList - [here's the documentation for a NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) — Jaromanda X, Nov 07 '17 at 22:16

score 4 · Answer 1 · answered Nov 07 '17 at 22:20

4

You can use Document#querySelector/All to find elements by data-* attribute using brackets in the query:

document.querySelector('[data-id="1023649435"]');

Demo:

const el = document.querySelector('[data-id="1023649435"]');
el.classList.add('modify-margin');

.modify-margin {
  color: red;
}

<ul>
  <li class="list-group-item" data-id="1023649435">Demo</li>
</ul>

answered Nov 07 '17 at 22:20

Ori Drori

183,571
29
224
209

thank you, this was very helpful. I have one other curve ball, what is the data-id starts with 1023...but after that, the numbers change. Can I use an operate to just pick those first few numbers for any data id starting with those? – sthig Nov 07 '17 at 22:34
1

@sthig Then you'd go for a selector like this: `document.querySelector('[data-id^="1023"]');` https://www.w3schools.com/cssref/sel_attr_begin.asp – Noino Nov 07 '17 at 22:42

marmeladze · Answer 2 · 2017-11-07T23:01:53.550

Use getElementsByClassName if possible.

You can of course rewrite the below snippet with querySelector/All.

What I've done briefly is, selecting all items having 'list-group-item' class name, filter those to keep only if they have data-id attribute and this one is positive number, then process with them.

Array.from(document.getElementsByClassName("list-group-item"))
  .filter(e => parseInt(e.dataset.id) > 0)
  .forEach(f => console.log(f.innerText)); 

/*
[].slice.call(document.getElementsByClassName("list-group-item")).filter(e => parseInt(e.dataset.id) > 0).forEach(f => console.log(f.innerText));
*/
/*
--- Or from your comment -))

Array.from(document.getElementsByClassName("list-group-item"))
  .filter(e => e.dataset.id.startsWith("1023"))
  .forEach(f => console.log(f.innerText)); 

*/

<li class="list-group-item" data-id="1023649435">seven</li>
<li class="list-group-item" data-id="1073649435">november</li>
<li class="list-group-item" data-id="1070249435">nineteen</li>
<li class="list-group-item" data-id="1925494359">seventeen</li>
<li class="list-group-item" data-foo="foo">socialist</li>
<li class="list-group-item" data-bar="bar">revolution</li>

es6 querySelectorAll a class and get it's data attribute

2 Answers2