如何使函數在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/