每个函数从数组中创建img元素

each function to create img elements out of array

本文关键字：创建 img 元素 数组 函数      更新时间：2023-09-26

我需要一些支持。我有一个数组:

var imageArr = [
    { someobject: '..', anotherobject: '..', img: 'SourceOfFirstImg.jpg'}, 
    { someobject: '..', anotherobject: '..', img: 'SourceOfSecondImg.jpg'},
    // 100 times
]

我想做的是创建一个.each()函数来创建<img>元素，用每个链接src填充它们并将它们附加到div。如果有一个普通的JS方式，我不一定需要each()，它也是好的。

我该怎么做?

您可以使用map方法创建一个图像元素数组来附加:

$('.somediv').append($.map(imageArr, function(o){
  return $('<img>', { src: o.img });
}));

var imageArr = [
                { someobject: '..', anotherobject: '..', img: 'SourceOfFirstImg.jpg'}, 
                { someobject: '..', anotherobject: '..', img: 'SourceOfSecondImg.jpg'},
                // 100 times
               ]
for (var i = 0; i < imageArr.length; i++) {
     var img = $('<img class="foo" >'); 
     img.attr('src', imageArr[i].img);
     $('body').append(img);
};

简单来说，我建议:

var imageArray = [{
    'alt': 'Alt text',
        'src': 'http://placekitten.com/200/200',
        'title': 'Title text'
}, {
    'alt': 'More alt text',
        'src': 'http://lorempixel.com/200/200',
        'title': 'Yet another title attribute'
}],
    target = document.body,
    img;
imageArray.forEach(function(a){
    img = document.createElement('img');
    for (var prop in a) {
        if (a.hasOwnProperty(prop)) {
            img[prop] = a[prop];
        }
    }
    target.appendChild(img);
});

JS Fiddle demo.

编辑使用OP发布的imageArr:

var imageArr = [{
    someobject: '..',
    anotherobject: '..',
    img: 'SourceOfFirstImg.jpg'
}, {
    someobject: '..',
    anotherobject: '..',
    img: 'SourceOfSecondImg.jpg'
}],
    target = document.body,
    img;
imageArr.forEach(function (a) {
    img = document.createElement('img');
    img.src = a.img;
    target.appendChild(img);
});

JS Fiddle demo.

引用:

  • Array.prototype.forEach() .
  • document.createElement() .
  • for...in .
  • Object.prototype.hasOwnProperty() .

试试这个:

var imageArr = [
    { someobject: '..', anotherobject: '..', img: 'http://www.clipartbest.com/cliparts/Rcd/K5B/RcdK5Bbgi.png'}, 
    { someobject: '..', anotherobject: '..', img: 'http://www.clipartbest.com/cliparts/Rcd/K5B/RcdK5Bbgi.png'},
]
var div = document.createElement("div");
for(i = 0; i< imageArr.length; i++)
{
   var img = document.createElement("img");
   img.setAttribute("src",imageArr[i].img);
   div.appendChild(img);
}
alert(div.innerHTML);

是演示

相关文章：