Question

我在这里有一个功能，用于将元素置于其父元素中。查看演示：http://jsfiddle.net/kE9xW/1/

现在它只将中心应用于第一个元素，我如何使函数循环本身，使其在页面上每个#element居中。演示是自我解释的，谢谢！

Answer 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调用。这将占用你所有的.element并将它们放在完全相同的位置。

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

请注意，请参阅Jamiec's working example了解解决方案。

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 更改为类，然后使容器的位置与css相关，我建议从你的函数中创建jQuery插件。查看结果http://jsfiddle.net/kE9xW/1/

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

3 个答案: