JQuery, используя цикл для создания новых divs

Я пытаюсь увеличить цикл JQuery, чтобы заполнить некоторый код HTML данными из файла JSON. Проблема в том, что я не могу понять, как написать дивы в HTML ниже друг друга, вместо этого цикл увеличивает данные друг над другом и, наконец, показывает последний объект в массиве на экране.JQuery, используя цикл для создания новых divs

Вот мой Javascript (tubing.js):

$(document).ready(function() { 
crazyFun(); 
}); 

function crazyFun() { 
for (var i = 0; i < virtualGoods.length; i++) { 
     var alpha= $('div.container').clone(); 
     alpha.find('div.picture').attr('id', virtualGoods[i].picture); 
     alpha.find('h2').html(virtualGoods[i].header); 
     alpha.find('p').html(virtualGoods[i].text); 
     alpha.find('div.notification').attr('id', virtualGoods[i].notification); 
     $('div.container').append(alpha); 
    } 
} 
}

"Контейнер" является HTML Div, что я хочу повторить на моей странице с заполненными данными JSON.

Вот мой HTML:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Hello World</title> 
     <link rel="stylesheet" type="text/css" href="iphone.css"/> 
     <script type="text/javascript" src="jquery.js"></script> 
     <script type="text/javascript" src="virtualgoods.js"></script> 
     <script type="text/javascript" src="tubing.js"></script> 
    </head> 
    <body> 
     <div id="mainhead"> 
      <h1> 
      Hello World 
      </h1> 
     </div> 
     <div id="repeater"> 
       <div class="container"> 
        <div class="picture"> 
        </div> 
        <div class="object"> 
         <div class="header"> 
          <h2></h2> 
         </div> 
         <div class="text"> 
          <p> 

          </p> 
         </div> 
        </div> 
        <div class="notification"> 
        </div> 
        <div class="neg"> 
        </div> 
       </div> 
     </div>  
    <div id="buffer"> 
    </div> 
    </body> 
</html>

источник

2010-07-20 Sachin

вы можете показать свой HTML код для этого ? –

Можете ли вы просто уточнить, какой 'div' клонируется и где он помещается ... является ли контейнер-ретранслятор клонированным и вставлен в контейнер-буфер? Я обновлю свой ответ, чтобы он лучше соответствовал этому, когда я точно знаю, что Продолжайте –

Конечно, Alastair. Мне нужно клонировать все внутри div класса Container, и мне нужно создать дополнительные контейнеры Container ниже предыдущего (один за другим). Буфер div - это просто фиктивный div ... Я просто понял, что мне нужно избавиться от атрибута класса Container из тега. Я также попытался реализовать ваш код, и когда я запустил HTML-файл, он остановил мой компьютер. – Sachin

3 вещи, выскочить на меня:

$('container') не выбирает свой DIV с id="container", он ищет <container> элемента. Попробуйте изменить это на $('#container').
Вы клонируете контейнер (или вы сделаете, когда вы делаете # 1), как alpha, но ваши данные не будут работать с ним. Попробуйте сделать этот шаблон: alpha.find('div.picture').attr('id', virtualGoods[i].picture);. Теперь вы редактируете div в клонированном альфа-div.
Вы хотите использовать .after() вместо append. Это вставляет alpha в DOM после container, а не внутри него.

Надеюсь, это поможет!

EDIT:

Хорошо, ваше почти там. всего пару изменений.

Изменить эту линию $('div.container').append(alpha); до $('#repeater').append(alpha);. Это будет означать, что вы добавляете новый, клонированный div после другого, а не внутри него.
Следующая проблема заключается в том, что когда вы клонируете, вы получите массив divs как альф, как ваш выбор в классе (.container). Что вам нужно сделать, это либо дать первый из них уникальный идентификатор, например id="template" и выбрать на том, что при клонировании или удалить атрибут класса с вашего клонированного DIV (используйте .removeClass().

источник

2010-07-20 04:52:56

Я также обновил свой код в соответствии с вашими предложениями в своем оригинальном посте. – Sachin

Спасибо! Это сработало. Можете ли вы объяснить более подробно, почему мне нужно назначить контейнеру уникальный идентификатор? Я все еще туманна в этой части. – Sachin

есть вопрос stackoverflow, который имеет дело с id и классом, который может помочь: http://stackoverflow.com/questions/970730/css-id-vs-class – pxl

JQuery, используя цикл для создания новых divs

ответ

Смежные вопросы