Javascript 如何在jQuery中使函数重复/循环？

我在这里有一个函数，用于将一个元素置于其父元素的中心。 查看演示：

---

现在，它只对第一个元素应用居中，我如何使函数循环本身居中，从而使页面上的每个元素居中。演示是不言自明的，谢谢

首先，最简单但最重要的部分：将ID更改为类。每个页面的ID必须是唯一的，因此JavaScript的document.getElementById函数只会为您提供第一个匹配元素：

每个id值在文档中只能使用一次。如果为多个元素分配了相同的ID，则使用该ID的查询将只选择DOM中第一个匹配的元素

改变

<div id="container">
    ...
    <div id="element">

到

接下来，更困难的部分是：您当前正在向元素发出一个centerDiv调用，其坐标从中心0,0开始。这将采取所有的。元素，并将它们放置在完全相同的位置

如果这不是您想要的，那么您必须使用循环遍历它们，并在每次迭代中确定xPosFromCenter和yPosFromCenter。我还不清楚你的功能是如何工作的，所以你可能需要自己去探索，看看你能想出什么

---

从头开始，查看解决方案。

您需要做几件事

如前所述，id必须是唯一的，因此更改id=。。。到类=。。。。您还需要将css更改为基于类而不是id更改元素'to'。元素'

<div class="container">
   <p> ... </p>
    <div class="element">
        &nbsp;
    </div>
</div>

您忘记考虑父div的顶部，这使得所有元素彼此重叠。因此，您的YPA变成：

var yPos = $(this).parent().position().top + 
        parseInt($(this).parent().css('height'))/2 -
        parseInt($(this).css('height'))/2 - yPosFromCenter;

检查工作提示：

在divs中将Id更改为class，然后使容器的位置与css相对，我建议从函数中创建jQuery插件。查看结果

是否有效？

$('.element')

<div class="container">
   <p> ... </p>
    <div class="element">
        &nbsp;
    </div>
</div>

element.each(function(){
  // work here in $(this) for the current element
});

var yPos = $(this).parent().position().top + 
        parseInt($(this).parent().css('height'))/2 -
        parseInt($(this).css('height'))/2 - yPosFromCenter;