在对象上迭代'的属性

Iterate over object's property

本文关键字：属性 对象 迭代      更新时间：2023-12-04

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

[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"}]

我需要：

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

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

类似的东西？

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

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

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

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

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

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

不一定是最简单（最短）的方法，但使用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()查找父元素，然后将其附加在那里。

使用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);
}

以下是我认为您正在努力实现的演示。

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>元素，为实际帖子图像创建<img>元素，然后将它们附加到<body>。

希望这能有所帮助！

相关文章：