Как сделать функцию повтора / цикла в jQuery?

Question

У меня есть функция для центрирования элемента внутри его родителя. Проверьте демо: http://jsfiddle.net/kE9xW/1/

сейчас он применяет только центрирование к первому элементу, как мне сделать сам цикл функции, чтобы он центрировал каждый #element на странице. демо самоочевидно, спасибо!

Answer 1

Есть несколько вещей, которые вам нужно сделать.

1. Как уже предлагалось, идентификаторы должны быть уникальными, поэтому измените id = "..." на class = "...". Вам также нужно изменить свой CSS, чтобы он основывался на классе, а не на идентификаторе (измените #element на «.element»)

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

2. Используйте each в своем методе для циклического перебора всех элементов, выбранных селектором $('.element').

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

3. Вы забыли принять во внимание верхнюю часть родительского элемента 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 2

Во-первых, самая простая, но самая важная часть: измените свои идентификаторы на классы. Идентификаторы должны быть уникальными для каждой страницы, поэтому Селектор идентификатора jQuery и функция JavaScript document.getElementById() предоставят вам только первый соответствующий элемент:

Каждое значение id должно использоваться только один раз в документе. Если более чем одному элементу был присвоен один и тот же идентификатор, запросы, использующие этот идентификатор, будут выбирать только первый соответствующий элемент в DOM.

Изменение

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

до

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

и изменить

$('#element')

до

$('.element')

Далее, более сложная часть: вы в настоящее время делаете один centerDiv() вызов для ваших элементов с координатами из центра 0, 0. Это займет все ваши .element с и поместит их в одно и то же место.

Если это не то, что вы намереваетесь, вам нужно будет просмотреть их, используя .each() и решить xPosFromCenter и yPosFromCenter в каждой итерации. Мне пока не ясно, как работает ваша функция, поэтому вам, возможно, придется изучить ее самостоятельно и посмотреть, что вы можете придумать.

Поцарапайте это, см. Рабочий пример Джеймика для решения.

Answer 3

Измените Id на class в ваших div, затем сделайте положение контейнера относительно css, и я предложу сделать плагин jQuery из вашей функции.Посмотреть результаты http://jsfiddle.net/kE9xW/1/