Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.11.2014, 13:48
Аспирант
Отправить личное сообщение для namez Посмотреть профиль Найти все сообщения от namez
 
Регистрация: 21.11.2008
Сообщений: 52

Append array to DOM
Всем привет!

У меня есть массив вида:

var aImages =[
        {
            link: "http://ya.ru",
            image :"/upload/image01.jpg",
                        width: "900"
        },
        {
            link: "http://ya.ru",
            image :"/upload/image02.jpg",
                        width: "1000"
        }
 ]



Есть разметка в html:

<div id="block">...</div>



Нужно из массива стянуть данные и вставить в #block, результат должен быть таким:

<div id="box">

<div class="item"><a href="http://ya.ru"><img src="/upload/image01.jpg" width="900"  /></a></div>
<div class="item"><a href="http://ya.ru"><img src="/upload/image02.jpg" width="1000"  /></a></div>

</div>



Как это делается на jquery, какой быстрый способ? Помогите примером пожалуйста. Спасибо!

Последний раз редактировалось namez, 09.11.2014 в 14:05.
Ответить с цитированием
  #2 (permalink)  
Старый 09.11.2014, 14:01
Аспирант
Отправить личное сообщение для namez Посмотреть профиль Найти все сообщения от namez
 
Регистрация: 21.11.2008
Сообщений: 52

Пытаюсь вот так

jQuery.each( aImages, function( url, image, width ) {
    $("#box").append("<div class='item' style='width:" + width + "'><a href='" + url + "' title=''><img src='" + image + "' /></a></div>");
  });


Но в html получаю

<div class="item" style="width:undefined"><a href="0" title=""><img src="[object Object]"></a></div>

Последний раз редактировалось namez, 09.11.2014 в 14:06.
Ответить с цитированием
  #3 (permalink)  
Старый 09.11.2014, 14:18
Аспирант
Отправить личное сообщение для namez Посмотреть профиль Найти все сообщения от namez
 
Регистрация: 21.11.2008
Сообщений: 52

jQuery.each( aImages, function () {
    $("#box").append("<div class='item' style='width:" + this.width + "'><a href='" + this.url + "' title=''><img src='" + this.image + "' /></a></div>");
  });
Ответить с цитированием
  #4 (permalink)  
Старый 09.11.2014, 14:22
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 22.12.2013
Сообщений: 1,856

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

<div id="block">...</div>

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
var aImages =[
        {
            link: "http://ya.ru",
            image :"/upload/image01.jpg",
                        width: "900"
        },
        {
            link: "http://ya.ru",
            image :"/upload/image02.jpg",
                        width: "1000"
        }
 ]
jQuery.each( aImages, function() {
  $("#block").append("<div class='item' style='width:" + this['width'] + "'><a href='" + this['link'] + "' title=''><img src='" + this['image'] + "' /></a></div>");
});

</script>
</body>

</html>
Ответить с цитированием
  #5 (permalink)  
Старый 09.11.2014, 14:22
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 22.12.2013
Сообщений: 1,856

http://jquery-docs.ru/utilities/jquery-each/
Ответить с цитированием
  #6 (permalink)  
Старый 09.11.2014, 14:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,826

namez,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(function() {
          var aImages = [{
              link: "http://ya.ru",
              image: "/upload/image01.jpg",
              width: "900"
          }, {
              link: "http://ya.ru",
              image: "/upload/image02.jpg",
              width: "1000"
          }];
          var $block = $('#block')
          $.each(aImages, function(indx, el) {

              var $div = $('<div/>', {
                      'class': 'item'
                  }),
                  $a = $('<a/>', {
                      'href': el.link
                  }),
                  $img = $('<img/>', {
                      'src': el.image,
                      'width': el.width
                  });
              $img.appendTo($a);
              $a.appendTo($div);
              $div.appendTo($block)
          });
          alert($('body').html())
      });
  </script>
</head>

<body>
<div id="block"></div>
</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 09.11.2014, 14:49
Аспирант
Отправить личное сообщение для namez Посмотреть профиль Найти все сообщения от namez
 
Регистрация: 21.11.2008
Сообщений: 52

Safort я уже сам решил если не выдел мой последний коммент -) Спасибо все равно что ответил -)

рони, зачем такие трудности?
Ответить с цитированием
  #8 (permalink)  
Старый 09.11.2014, 15:08
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

Можно же свести к одной операции с DOM, а не выполнять отдельно добавление каждого div.item:
$('#box').html(aImages.reduce(function (html, data) {
    return html + '<div class="item" style="width:"' + data.width + 'px"><a href="' + data.url + '" title=""><img src="' + data.image + '"></a></div>';
}, ''));
Ответить с цитированием
  #9 (permalink)  
Старый 09.11.2014, 15:35
Аспирант
Отправить личное сообщение для namez Посмотреть профиль Найти все сообщения от namez
 
Регистрация: 21.11.2008
Сообщений: 52

del

Последний раз редактировалось namez, 09.11.2014 в 15:43.
Ответить с цитированием
  #10 (permalink)  
Старый 09.11.2014, 17:13
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 22.12.2013
Сообщений: 1,856

namez,
Цитата:
Safort я уже сам решил если не выдел мой последний коммент -) Спасибо все равно что ответил -)
Увидел уже после добавления своего ответа)

//ну наконец-то я опередил рони по ответам)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
инициализация плагинов до вставки html-я в DOM FanAizu jQuery 3 18.01.2014 23:16
Новый элемент отсутствует в DOM модели StrSprut jQuery 4 19.09.2011 11:50
Как в браузерах реализуются функции DOM (например createElement) iamme Общие вопросы Javascript 7 02.09.2011 19:26
Как сделать сохранение списков select? sega_z Элементы интерфейса 8 15.05.2011 17:01
Многомерный массив в json Л_Денис Общие вопросы Javascript 1 21.04.2010 20:43