jquery - 如何使用 jquery 遍历这个数组？

Question

我将如何使用 Jquery.each() 输出此数据以使用 Jquery 循环以下数组？

var data = [
{
value: 36,
color:"#89228f",
legend:"My title" 
},
{
value: 12,
color:"#89288f",
legend:"This title" 
}
]

我想输出这样的结果

  <li><div class="colorblock" style="background-color:#89288f"></div> <div class="legend">This title</div></li>


  <li><div class="colorblock" style="background-color:#89228f"></div> <div class="legend">My  title</div></li>

Answer 1

使用jQuery.map和.join()

var string = $.map(data, function(data, index){
    return '<li><div class="colorblock" style="background-color:#' + data.color + '"></div> <div class="legend">' + data.title +'</div></li>'
}).join('');

演示：小提琴

Answer 2

演示

$.each( data, function( key, val ) {
    $("#id_of_your_ul").append('<li><div class="colorblock" style="background-color:'+ val.color +'"></div> <div class="legend">'+ val.legend +'</div></li>');
});

Answer 3

我认为文档很好地解释了如何使用 .each http://api.jquery.com/jQuery.each/

$.each(data, function(index, value) {
  // create div element with data
  // append the new div to the DOM
});

Answer 4

http://api.jquery.com/jQuery.each/是寻找问题答案的好地方。您的关键问题将是决定是使用 1 个还是 2 个选择器。2 可能更容易让你去这里 - 第一个选择所有带有类图例的 div

 $('div.legend').each(data,function(i,v){
         $(this).text=v.legend;
 });

您可能想要检查数据是否具有与选择器中选择的数字更多或相等的元素。

您可以使用 $('div.colorblock').each() 使用 .attr('style',value) 做类似的事情

您可以使用 1 个选择器并查看 div 的子元素

元素。第一个使用 .attr('style',value) ，第二个使用文本。我认为现在您可能只想让它工作，然后根据您的页面布局优化选择器的使用。