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

Question

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

现在，它仅将居中应用于第一个元素，我如何使函数循环本身如此，以便它使页面上的每个#element居中。 该演示是不言自明的，谢谢！

Answer 1

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

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

更改

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

至

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

并改变

$('#element')

至

$('.element')

接下来，比较难的部分：您目前正在发行一个centerDiv()坐标从中心打电话给你的元素0, 0 。 这将占用所有.element ，并将它们放置在完全相同的位置。

如果这不是您想要的，则必须使用.each()遍历它们，并在每次迭代中确定xPosFromCenter和yPosFromCenter 。 我尚不清楚您的功能如何工作，因此您可能必须自己进行探索，然后看看可以做什么。

首先，请参见Jamiec的工作示例以获取解决方案。

Answer 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/

Answer 3

将div的ID更改为class ，然后使用css设置容器的相对位置，我建议从您的函数中创建jQuery插件。 查看结果http://jsfiddle.net/kE9xW/1/