在javascript中，我如何在具有相同类的多个div上运行一个函数以获得不同的结果答案

【问题标题】：In javascript how I run a function on multiple divs with the same class to get different results在javascript中，我如何在具有相同类的多个div上运行一个函数以获得不同的结果
【发布时间】：2021-07-29 18:02:05
【问题描述】：

我正在尝试在具有相同类的不同 div 上运行相同的功能。问题是我需要函数来使用每个容器的 offsetTop 并且每个 div 都有不同的值。 div 具有相同的类，因为我不知道网站的每个页面上会出现多少个 div。

<!DOCTYPE html>
<html>
<body>

   <div class="container-div">
      <div class="element">Distance to top is </div>
   </div>
    
    <p>
        .<br>.<br>.<br>.<br>
    </p>

   <div class="container-div">
      <div class="element">Distance to top is </div>
   </div>

    <p>
        .<br>.<br>.<br>.<br>
    </p>

   <div class="container-div">
      <div class="element">Distance to top is </div>
   </div>

<button onclick="myFunction()">Get distance</button>


<script>
function myFunction() {
  var container = document.getElementsByClassName("container-div");
  
  container[0].innerHTML = "Distance to top for this Div is" container.offsetTop;
  container[1].innerHTML = "Distance to top for this Div is" container.offsetTop;
  container[2].innerHTML = "Distance to top for this Div is" container.offsetTop;
}
</script>

</body>
</html>

【问题讨论】：

听起来你想使用for循环，循环所有元素（不管有多少）并对它们进行一些操作。如果是这样的话，你可以看看this question

标签： javascript html multiple-instances getelementsbyclassname

【解决方案1】：

据我了解，这就是您所需要的，forEach 循环遍历所有带有类元素的 div。您可以使用 document.querySelectorAll('.yourclass') 按类获取所有 div

<!DOCTYPE html>
<html>

<body>

  <div class="container-div">
    <div class="element">Distance to top is </div>
  </div>

  <p>
    .<br>.<br>.<br>.<br>
  </p>

  <div class="container-div">
    <div class="element">Distance to top is </div>
  </div>

  <p>
    .<br>.<br>.<br>.<br>
  </p>

  <div class="container-div">
    <div class="element">Distance to top is </div>
  </div>

  <button onclick="myFunction()">Get distance</button>


  <script>
    function myFunction() {
      // Get all divs 

      const divElements = document.querySelectorAll('.element')
      // Loop trough all elements you selected
      divElements.forEach(element => {

        let distance = element.offsetTop;
        element.innerHTML = 'Distance to top is: ' + distance;

      });
    }
  </script>

</body>

</html>

【讨论】：

【解决方案2】：

document.getElementsByClassName("container-div") 将返回具有 container-div 类的元素集合，而您可以像这样循环遍历它们：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container-div">
        <div class="element">Distance to top is </div>
    </div>
        
        <p>
            .<br>.<br>.<br>.<br>
        </p>

    <div class="container-div">
        <div class="element">Distance to top is </div>
    </div>

        <p>
            .<br>.<br>.<br>.<br>
        </p>

    <div class="container-div">
        <div class="element">Distance to top is </div>
    </div>

    <button onclick="myFunction()">Get distance</button>


    <script>
        function myFunction() {
            var container = document.getElementsByClassName("container-div");
            for(let i = 0; i<container.length;i++){
            container[i].innerHTML = "Distance to top is " + container[i].offsetTop;
            }
            
        }
    </script>
</body>
</html>

【讨论】：