查找类中具有属性的所有元素答案

【问题标题】：Find all elements with attribute in class查找类中具有属性的所有元素
【发布时间】：2021-10-19 03:50:00
【问题描述】：

我想选择 main 类中属性为 [data-direction] 的所有元素

<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';
    }
}

【问题讨论】：

使用myElement.querySelectorAll('div[data-direction]');而不是你的代码，你需要指定元素，如果你确定main和myElement的长度是一样的，使用一个for循环
myElement 和 main 是集合，因此名称应该是复数。
如果要选择所有具有data-direction 属性并且是类main 元素的后代的元素，可以使用document.querySelectorAll('.main [data-direction]');；如果你只想要main 元素的直接子元素，你可以使用document.querySelectorAll('.main > [data-direction]');
a) 为什么不在 CSS 中设置 position: relative？我看不出在 javascript 中设置它们有什么好处。 b.1) 您没有在数据方向 div 上设置 position: relative，并且 b.2) 您不应该使用 top 来移动，而是使用 transform: translateY() 来避免整个页面必须重新计算位置。
除了数组之外，parallaxStart 是什么？

标签： javascript html custom-data-attribute

【解决方案1】：

您可以定位循环内的内部元素：

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>

【讨论】：

在我看来，是否有任何理由在 for 循环中使用 var 而不是 let 和 parallaxStart 也可以用 const 声明。
@Habebit 性能有区别吗？顺便提一句。代码对我有用:)
@Maredok stackoverflow.com/questions/21467642/…（性能）和stackoverflow.com/questions/32313961/…（让与 var 在 foo 循环中）

【解决方案2】：

forEach可以和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>

参考：

【讨论】：

【解决方案3】：

只需定位.main 类中具有该数据属性的所有元素，然后使用closest 并调整main 类的CSS。

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>

【讨论】：

他需要将 main 元素和 data-direction 的 css 更改为每个 main，您的代码不适用于 OP 情况。
很容易修复，@SimoneRossaini。

【解决方案4】：

你需要那个：

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

【讨论】：

它是一个变量。