Форум

namez · #1 (**permalink**) 09.11.2014, 14:48

Всем привет!

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

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 · #2 (**permalink**) 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 · #3 (**permalink**) 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 · #4 (**permalink**) 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 · #5 (**permalink**) 09.11.2014, 15:22

http://jquery-docs.ru/utilities/jquery-each/

рони · #6 (**permalink**) 09.11.2014, 15:29

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>

namez · #7 (**permalink**) 09.11.2014, 15:49

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

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

Octane · #8 (**permalink**) 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 · #9 (**permalink**) 09.11.2014, 16:35

Safort · #10 (**permalink**) 09.11.2014, 18:13

namez,

Цитата:

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

Увидел уже после добавления своего ответа)

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

Форум

Справочник

Discord чат

Курсы javascript