将返回的数据附加到基于对象名称的不同元素

Question

如何根据对象的名称将json返回的对象附加到不同的元素？我的JSON数据比下面的例子中更大，所以我不知道这是一个好主意在.ajax if语句用于每个对象：

JSON示例数据

[{"name":"Europe","year":"2000"},{"name":"Asia","year":"2001"},{"name":"Africa","year":"2002"}] 

HTML

<div class="Europe"></div> 
<div class="Asia"></div> 
<div class="Africa"></div> 

JS

$.ajax({ 
    url: "text.json",  
    success: function (data) { 
    var item_html; 

     $(data).each(function (index, item) { 
     var name = item.name; 
     item_html='<h3>'+name+'</h3><div>'+item.year+'</div>'; 
     }); 

     if (name == Africa){ 
     $('.Africa').append(item_html); 
     } 
     if (name == Europe){ 
     $('.Europe').append(item_html); 
     } 
     if (name == Asia){ 
     $('.Asia').append(item_html); 
     } 

    }, 
    error: function() {$('.Europe').append("<b>No Results Returned</b>");}   
}); 

Answer 1

将您的if块移动到each

$(data).each(function (index, item) { 
    var name = item.name; 
    item_html = '<h3>' + name + '</h3><div>' + item.year + '</div>'; 
    if(name == 'Africa') { 
     $('.Africa').append(item_html); 
    } 
    if(name == 'Europe') { 
     $('.Europe').append(item_html); 
    } 
    if(name == 'Asia') { 
     $('.Asia').append(item_html); 
    } 
}); 

Answer 2

我觉得既然名字和类名是相同的，你可以用它来找到.each()环内的目标元素，并将其内容，如

$.ajax({ 
    url: "text.json", 
    success: function (data) { 
     var item_html; 

     $(data).each(function (index, item) { 
      var name = item.name; 
      $('.' + name).html('<h3>' + name + '</h3><div>' + item.year + '</div>') 
     }); 
    }, 
    error: function() { 
     $('.Europe').append("<b>No Results Returned</b>"); 
    } 
});