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('');

演示：Fiddle

Answer 2

DEMO

$.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），第二个使用文本。我想现在你可能只想让它工作，然后根据页面布局优化选择器的使用。

如何使用jquery遍历此数组？

4 个答案: