Find all elements with attribute in class

Question

I would like to select all elements with attribute [data-direction] in class main

<div class="main">
   <div data-direction="top">1</div>
   <div data-direction="top">2</div>
   <div>3</div>
</div>
<div class="main">
   <div data-direction="top">3</div>
   <div>4</div>
   <div data-direction="top">5</div>
</div>

So I can select each div with data-direction in specific class. Something like: main[x].style.top = '10px'

myElement = document.querySelectorAll('.main');
main = myElement.querySelectorAll('[data-direction]');

for (var i = 0; i < myElement.length; i++) {
    myElement[i].style.position = 'relative';

    for (var x = 0; x < parallaxStart.length; x++) {
      main[x].style.top = '10px';
    }
}

Use `myElement.querySelectorAll('div[data-direction]');` instead of your code, you need to specific the element, and if you are sure the lenght of main and myElement it's same use one for-loop — Simone Rossaini, Aug 17 '21 at 08:20
`myElement` and `main` are collections, hence the name should be plural. — Andreas, Aug 17 '21 at 08:22
If you want to select all elements that have the attribute `data-direction` and are descendant of an element with the class `main`, you can use `document.querySelectorAll('.main [data-direction]');`; if you want only direct children of the `main` elements, you can use `document.querySelectorAll('.main > [data-direction]');` — secan, Aug 17 '21 at 08:25
a) Why aren't you setting `position: relative` in CSS? I can't see any advantage setting them in javascript. b.1) You're not setting `position: relative` on your data-direction divs, and b.2) You shouldn't use `top` to move, but `transform: translateY()` to avoid the entire page having to recalculate position. — Rickard Elimää, Aug 17 '21 at 08:31
@RickardElimää It was just an example css, the main thing was to select specific divs :) but thank you for advice! — Matredok, Aug 17 '21 at 08:37

score 0 · Answer 1 · answered Aug 17 '21 at 08:28

You can use forEach with querySelectorAll, and remember to specify the element like div[data-direction]

const myElementArr = document.querySelectorAll('.main');
myElementArr.forEach(element => {
  element.style.position = 'relative';
  let mains = element.querySelectorAll('div[data-direction]');
  mains.forEach(main => {      
      main.style.top = '10px';
  });
});

<div class="main">
  <div data-direction="top">1</div>
  <div data-direction="top">2</div>
  <div>3</div>
</div>
<div class="main">
  <div data-direction="top">3</div>
  <div>4</div>
  <div data-direction="top">5</div>
</div>

Reference:

score 0 · Accepted Answer · answered Aug 17 '21 at 08:28

0

You can target the inner elements inside the loop:

myElement = document.querySelectorAll('.main');

for (var i = 0; i < myElement.length; i++) {
    myElement[i].style.position = 'relative';
    var parallaxStart = myElement[i].querySelectorAll('[data-direction]');
    for (var x = 0; x < parallaxStart.length; x++) {
      parallaxStart[x].style.marginTop = '40px';
    }
}

<div class="main">
   <div data-direction="top">1</div>
   <div data-direction="top">2</div>
   <div>3</div>
</div>
<div class="main">
   <div data-direction="top">3</div>
   <div>4</div>
   <div data-direction="top">5</div>
</div>

answered Aug 17 '21 at 08:28

Mamun

66,969
9
47
59

2

Is there any reason for using var in both for-loops instead of let and parallaxStart could also be declared with const in my opinion. – Habebit Aug 17 '21 at 08:32
@Habebit is there a difference in performance? BTW. code works for me :) – Matredok Aug 17 '21 at 08:43
1

@Matredok https://stackoverflow.com/questions/21467642/is-there-a-performance-difference-between-let-and-var-in-javascript (performance) and https://stackoverflow.com/questions/32313961/let-vs-var-in-javascript-for-loops-does-it-mean-that-all-the-for-loops-usin/32314080 (let vs. var in foor-loops) – Habebit Aug 17 '21 at 08:49

Andy · Answer 3 · 2021-08-17T09:32:53.100

0

Just target all elements with that data attribute within the .main classes, and then use closest and adjust the CSS of the main class.

const directions = document.querySelectorAll('.main [data-direction]');

directions.forEach(direction => {
  direction.classList.add('blue');
  direction.closest('.main').classList.add('embolden');
});

.embolden { font-weight: bold; }
.blue { color: blue; }

<div class="main">
  <div data-direction="top">1</div>
  <div data-direction="top">2</div>
  <div>3</div>
</div>
<div class="main">
  <div data-direction="top">3</div>
  <div>4</div>
  <div data-direction="top">5</div>
</div>

edited Aug 17 '21 at 09:32

answered Aug 17 '21 at 08:43

Andy

61,948
13
68
95

1

He need to change css for `main` elements and `data-direction` into each main, your code don't work for OP situation. – Simone Rossaini Aug 17 '21 at 08:44
Easily fixed, @SimoneRossaini. – Andy Aug 17 '21 at 08:51

score -1 · Answer 4 · edited Aug 17 '21 at 10:49

-1

You need that:

document.querySelectorAll('.main').forEach((main) => {
  main.style.position = 'relative';
  main.querySelectorAll('[data-direction]').forEach((x) => {
    x.style.top = '10px';
  })
})

edited Aug 17 '21 at 10:49

Habebit

957
6
23

answered Aug 17 '21 at 08:22

Bulent

3,307
1
14
22

It's a variable. – Bulent Aug 17 '21 at 14:39

Find all elements with attribute in class

4 Answers4