时间戳

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

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

问题描述

我正在尝试在具有相同类的不同 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>

标签： javascripthtmlmultiple-instancesgetelementsbyclassname

解决方案

据我了解，这就是您所需要的，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>

推荐阅读