在 javascript 中，我如何运行在具有相同 class 的多个 div 上使用一个函数来获得不同的结果

Question

我正在尝试运行使用相同的 class 在不同的 div 上使用相同的功能。问题是我需要函数来使用每个容器的 offsetTop 并且每个 div 都有不同的值。 div 具有相同的 class，因为我不知道站点的每个页面上将出现多少 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>

Answer 1

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

通过 class 获得所有 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>

Answer 2

document.getElementsByClassName("container-div") 将 return 具有 container-div class 和你的元素集合可以像这样遍历它们：

<!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>

在 javascript 中，我如何运行在具有相同 class 的多个 div 上使用一个函数来获得不同的结果

In javascript how I run a function on multiple divs with the same class to get different results

html

javascript

multiple-instances

getelementsbyclassname

在 javascript 中，我如何 运行 在具有相同 class 的多个 div 上使用一个函数来获得不同的结果

In javascript how I run a function on multiple divs with the same class to get different results

html

javascript

multiple-instances

getelementsbyclassname

在 javascript 中，我如何运行在具有相同 class 的多个 div 上使用一个函数来获得不同的结果