javascript - 循环 JSON 结果并相应地设置 div html

Question

我有一个结构简单的 HTML 页面，如下所示:

<li class="slide">
    <h1>Hello</h1>
    <p>This is a test.</p>
</li>
<li class="slide">
    <h1>Hello Again</h1>
    <p>This is another test.</p>
</li>
<li class="slide">
    <h1>Hello For The Last Time</h1>
    <p>This is yet another test.</p>
</li>

现在我有 .json 文件，其中包含一些值...如下

var slides = [
{"maand": "September", "titel": "First Title", "inhoud": "Content 1"},
{"maand": "Oktober", "titel": "Second Title", "inhoud": "Content 2"},
{"maand": "November", "titel": "Third Title", "inhoud": "Content 3"},
]

现在我试图确保每个 .slide h1 都是来自 json 文件的标题 由于某种原因，它总是分配最后一个标题(“第三个标题”)。

##我尝试了以下循环##

$.each(slides, function(i, data){
    $('li.slide h1').html(data.titel)           
});

但这始终返回 .json 文件中的最后一项。 我也尝试过，结果相同

$.each(slides, function(i,data){

    $('li.slide h1').each(function(){
        $(this).html(data.titel);
    });

});

##解决方案1##

我只需在 .eq 中添加 1。也许它从 1 而不是 0 开始？

$.each(slides, function(i,data){
    $('li.slide h1').eq(i+1).html(data.titel);
});

Answer 1

试试这个

var dom=$('li.slide h1');  
$.each(slides, function(i, data){
    dom.eq(i).html(data.titel)           
});

<强> DEMO