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

【问题标题】：How to make a function repeat/loop in jQuery?如何在 jQuery 中使函数重复/循环？
【发布时间】：2011-06-17 06:43:16
【问题描述】：

我这里有一个函数可以在它的父元素中居中。查看演示：http://jsfiddle.net/kE9xW/1/

现在它只对第一个元素应用居中，我如何使函数本身循环，以便它在页面上的每个 #element 居中。该演示一目了然，谢谢！

【问题讨论】：

jsfiddle.net/Raynos/kE9xW/3 有用吗？

标签： javascript jquery html loops

【解决方案1】：

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

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

改变

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

到

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

改变

$('#element')

到

$('.element')

接下来，更困难的部分：您当前正在向您的元素发出一个centerDiv() 调用，其坐标位于0, 0 的中心。这将占用您所有的.elements 并将它们定位在完全相同的位置。

如果这不是您想要的，您将不得不使用.each() 循环遍历它们，并在每次迭代中确定xPosFromCenter 和yPosFromCenter。我还不清楚你的函数是如何工作的，所以你可能不得不自己探索，看看你能想出什么。

从头开始，解决方案见Jamiec's working example。

【讨论】：

【解决方案2】：

您需要做一些事情。

如前所述，id 必须是唯一的，因此将 id="..." 更改为 class="..."。您还需要将您的 css 更改为基于类而不是 id（将 #element' 更改为 '.element'）
```
<div class="container">
   <p> ... </p>
    <div class="element">
        &nbsp;
    </div>
</div>
```
在您的方法中使用each 循环遍历选择器$('.element') 选择的所有元素。
```
element.each(function(){
  // work here in $(this) for the current element
});
```

您忘记考虑父 div 的顶部，这使得所有元素相互重叠。所以你的 yPas 变成：

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

检查工作小提琴：http://jsfiddle.net/H99DT/

【讨论】：

【解决方案3】：

在你的 div 中将 Id 更改为 class，然后使容器的位置与 css 相关，我会建议从你的函数中制作 jQuery 插件。查看结果http://jsfiddle.net/kE9xW/1/

【讨论】：