Question

我有一个对象数组。每个对象都有一个标题和一个链接。

[Object { title="Do it", reslink="http://img-9gag-ftw.9cac.../photo/a5PrnLE_460s.jpg"},
Object { title="\n \n ...le \n ", reslink="http://img-9gag-ftw.9cac.../photo/aE17NWG_460s.jpg"}, 
Object { title="\n \n ...es \n ", reslink="http://img-9gag-ftw.9cac...oto/a2Y5RqD_460s_v1.jpg"}]

我需要：

在页面上为每个标题创建一个元素
为每个reslink创建一个元素

实现这一目标的最简单方法是什么？

Answer 1

这样的东西？

for(var i in objects){
  var h1 = '<h1>' + objects[i].title + '</h1>';
  var href = '<a href="' + objects[i].reslink + '">linkText</a>';
}

Answer 2

您可以使用map方法为每个数组项创建元素。

例如，这将创建一个链接数组，其title属性为文本，reslink属性为href：

var links = $.map(objects, function(o){
  return $('<a>', { href: o.reslink }).text(o.title)[0];
});

结果是一个元素数组，您可以在页面中附加：

$('#someElement').append(links);

Answer 3

不一定是最简单（最短）的方式，但使用DOM API可以比使用innerHTML之类的东西更清晰（并且可能更快）。

我的解决方案：

for (var i = 0; i < array.length; i++) {
    var header = document.createElement('h1');
    header.textContent = array[i].title;
    // append the DOM element to another element (maybe to body)
    document.body.appendChild(header);

    var link = document.createElement('a');
    link.setAttribute('href', array[i].reslink);
    // append the DOM element
    document.body.appendChild(link);
}

可能你不想将它追加到身体的尽头，但你明白了。如果您想将其附加到其他地方，请使用#getElementById()或#querySelector()查找父元素，然后将其附加到其中。

Answer 4

使用for循环迭代它们。然后用户jQuery的函数（append，prepend等等......）插入新元素。

我不确定你要创造什么，但是这里...... 示例：

for(var i=0; i < list.length; i++)
{
   var titleElement = "<title>" + list[i].title + "</title>";
   var linkElement = "<a href=" + list[i].reslink +">" + list[i].title + "</a>";
   $('#whereToInsertSelector').append(titleElement);
   $('#whereToInsertSelector2').append(linkElement);
}

Answer 5

以下是我认为您要完成的demo。

的JavaScript

NineGagPosts = [{
    title: "Can't be the only one",
    reslink: "http://img-9gag-ftw.9cache.com/photo/avgPd9n_700b_v1.jpg"
}, {
    title: "This a**hole",
    reslink: "http://img-9gag-ftw.9cache.com/photo/aqNLejQ_700b.jpg"
}, {
    title: "She looks fun",
    reslink: "http://img-9gag-ftw.9cache.com/photo/a2Y5K2E_700b_v1.jpg"
}];

window.addEventListener("load", readPosts);

function readPosts() {

    for (var i = 0, l = NineGagPosts.length; i < l; i++) {
        var post = NineGagPosts[i];
        var title = document.createElement("h1");
        var image = new Image();
        title.innerHTML = post.title;
        image.src = post.reslink;
        image.width = 250;
        document.body.appendChild(title);
        document.body.appendChild(image);
    }

}

当页面加载（访问document.body）时，我们调用readPosts()函数，该函数将迭代所有帖子并为标题创建<h1>元素并{{1实际帖子图片的元素，然后将它们附加到<img>。

希望这有帮助！

迭代对象的属性

5 个答案:

的JavaScript