循环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

Answer 2

请参阅此

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

http://jsfiddle.net/H7J3X/