时间戳

首页 > 解决方案 > 查找类中具有属性的所有元素

javascript - 查找类中具有属性的所有元素

问题描述

我想[data-direction]在类中选择所有具有属性的元素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>

所以我可以选择data-direction特定类中的每个 div。就像是：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';
    }
}

标签： javascripthtmlcustom-data-attribute

解决方案

您可以使用forEachwith querySelectorAll，并记得指定元素，如 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>

参考：

推荐阅读