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

我试图遍历这个数组中的所有对象，并显示所有的标题。最终我想展示一切，但现在我只能满足于这一点。如何在屏幕上显示所有标题

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

---

您需要将代码更新为以下内容

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

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

---

您需要将代码更新为以下内容

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

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

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

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

---

因为您正在使用

.html（myCaption）

覆盖上一个值，因为您正在使用

.html（myCaption）