有没有办法在没有 for 循环的情况下获取所有 Class 元素？答案

【问题标题】：Is there a way to get all Class elements without for-loop?有没有办法在没有 for 循环的情况下获取所有 Class 元素？
【发布时间】：2020-04-07 02:00:35
【问题描述】：

所以我想通过 document.getElementsByClassName(); 获取所有类元素

<body>
    <div class="circle" id="red"></div>

    <div class="circle" id="blue"></div>

    <div class="circle" id="yellow"></div>

    <input id="disappear" type="button" value="disappear" onclick="disappear()">
  </body>

<script>
     function disappear(){
       document.getElementsByClassName(".circle").style.display = none;
     }
</script>

我想用document.getElementsByClassName(".circle").style.display = none;让那些圈子消失

这个不行所以我用了

function disappear(){
            var x, i;
            x = document.querySelectorAll(".circle");
              for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
              }
        }

我的问题是，有没有办法在没有循环的情况下选择所有类？

【问题讨论】：

如果您有一组独立元素，则必须分别修改每个元素。您可以将它们全部包装在另一个元素中并隐藏此父元素：<div id="place-for-all-my-circles"><div class="circle"></div>/*...*/</div> + document.querySelector("#place-for-all-my-circles").style.display = "none"

标签： javascript html css loops dom

【解决方案1】：

您需要一个循环来迭代这些项目。但是，Document.querySelectorAll() 返回一个 NodeList，您可以使用 NodeList.forEach()（仍然是一个循环）来迭代元素并隐藏它们：

function disappear() {
  document.querySelectorAll(".circle").forEach(el => el.style.display = 'none');
}

<body>
  <div class="circle" id="red">1</div>

  <div class="circle" id="blue">2</div>

  <div class="circle" id="yellow">3</div>

  <input id="disappear" type="button" value="disappear" onclick="disappear()">
</body>

【讨论】：

我会为每个元素添加一个隐藏类（其中隐藏是.hidden { display:none}），而不是从 js 更改 css。不过答案很好

【解决方案2】：

如果你不介意使用 jQuery，你可以这样做：

$(".circle").css("display", "none");

或者，甚至更短：

$(".circle").hide();

【讨论】：

你在哪里找到问题或标签中的 jQuery？
好吧，OP 没有提到他们只想要香草 JS。
哦，太好了！这很有用！！谢谢！

【解决方案3】：

您可以使用内置数组映射功能

function disappearListener(){
   var circles = document.getElementsByClassName("circle");
   circles.map(circle=>{
      circle.style.display = none;
      //or
      circle.classList.add('.hideCircle');
   })
 }

 var disappearButton = document.getElementById("disappear");
 disappearButton.addEventListener('click',disappearListener)

关于 CSS 文件

.hideCircle {
   display: none;
}

【讨论】：