Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Append array to DOM (https://javascript.ru/forum/jquery/51506-append-array-dom.html)

namez 09.11.2014 14:48
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 15:01
Пытаюсь вот так

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 15:18 
jQuery.each( aImages, function () {
    $("#box").append("<div class='item' style='width:" + this.width + "'><a href='" + this.url + "' title=''><img src='" + this.image + "' /></a></div>");
  });

Safort 09.11.2014 15:22 
<!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>

Safort 09.11.2014 15:22
http://jquery-docs.ru/utilities/jquery-each/

рони 09.11.2014 15:29
namez,
:blink: 
<!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>

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

рони, зачем такие трудности?

Octane 09.11.2014 16:08
Можно же свести к одной операции с 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>';
}, ''));

namez 09.11.2014 16:35
del

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

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


Часовой пояс GMT +3, время: 04:48.