Question

我正在尝试遍历此数组中的所有对象并显示所有标题。最终我想展示一切，但是现在我会满足于这一件事。如何在屏幕上显示所有标题？

var thumbnails = [
    {
        caption: 'An Avocado',
        image: 'images/avocado.jpg',
        url: 'https://en.wikipedia.org/wiki/Avocado'
    },
    {
        caption: 'A Cat',
        image: 'images/cat.jpg',
        url: 'http://mashable.com/category/cats/'
    },
    {
        caption: 'A Dog',
        image: 'images/dog.jpg',
        url: 'https://www.petfinder.com/dog-breeds/'
    },
    {
        caption: 'A Llama',
        image: 'images/llama.jpg',
        url: 'http://animals.nationalgeographic.com/animals/mammals/llama/'
    },
    {
        caption: 'Pandas are the best',
        image: 'images/panda.jpg',
        url: 'http://pandas.pydata.org/'
    },
    {
        caption: 'This is random',
        image: 'images/thumb.jpg',
        url: 'http://www.merriam-webster.com/dictionary/thumb'
    }
];

这就是我所拥有的，但它只显示最后一个标题。

$.each(thumbnails, function(index, value) {
    var myCaption = value.caption;
    $('.thumbnails').html(myCaption);
    console.log(myCaption);
});

Answer 1

您需要将代码更新为以下

var myCaption = "";
$.each(thumbnails, function(index, value) {
    myCaption += value.caption + " ";

});
$('.thumbnails').html(myCaption);
console.log(myCaption);

Answer 2

您需要调用append（）而不是html（）。它现在的工作方式是你先前的值被踩踏，只显示最后一个。

https://jsbin.com/makecekuqa/edit?html,js,console,output

在一个数组中迭代具有相同属性的多个对象

2 个答案: