分组jQuery的创建复选框基于属性

Question

我有一个这样的数组：

var arr = [ 
      { Group: 'Fruits', Name: 'Apple' }, 
      { Group: 'Fruits', Name: 'Pears' }, 
      { Group: 'Veggies', Name: 'Tomatoes' }, 
      { Group: 'Veggies', Name: 'Carrots' } 
      ]; 

我想在我的HTML容器中为每个组创建复选框

，所以我得到这样的输出：

<div id="container"> 
    <h4> 
     Fruits</h4> 
    <ul id="Fruits"> 
     <li> 
      <input type="checkbox" name="Apples" id="Fruits-Apples" /><label>Apples</label></li> 
     <li> 
      <input type="checkbox" name="Pears" id="Fruits-Pears" /><label></label>Pears</li> 
    </ul> 
    <h4> 
     Veggies</h4> 
    <ul id="Veggies"> 
     <li> 
      <input type="checkbox" name="Tomatoes" id="Veggies-Tomatoes" /><label>Tomatoes</label></li> 
     <li> 
      <input type="checkbox" name="Carrots" id="Veggies-Carrots" /><label>Carrots</label></li> 
    </ul> 
</div> 

什么是使用jQuery来做到这一点的最佳方法？

Answer 1

我固定迦腻色迦的代码，所以它的工作原理：

var content = ''; 
var prev = ''; 

for (var arrayIndex in arr) 
{ 
    if (prev != arr[arrayIndex].Group) 
    { 
     prev = arr[arrayIndex].Group; 
     content = '<h4>' + arr[arrayIndex].Group + '</h4><ul id="' + arr[arrayIndex].Group + '"></ul>'; 
     $('#container').append(content); 
    } 
} 

for (var arrayIndex in arr) 
{ 
    var list = '<li>' + 
      '<input type="checkbox" id="' + arr[arrayIndex].Group + '-' + arr[arrayIndex].Name + '" />' + 
      '<label>' + arr[arrayIndex].Name + '</label>' + '</li>'; 

    $('#container > ' + '#' + arr[arrayIndex].Group).append(list); 
}   

Answer 2

退房jQuery的模板

http://api.jquery.com/tmplitem/

Answer 3

 var content = ''; 
     var prev = ''; 

     for (var arrayIndex in arr) { 

      if(prev != arr[arrayIndex][0]) 
      { 
       prev = arr[arrayIndex][0]; 
       content += '<h4>'+arr[arrayIndex][0]+'</h4><ul id="'+arr[arrayIndex][0]+'"></ul>'; 
       $('#container').append(content); 
      } 

     } 

     for (var arrayIndex in arr) { 

     var list = '<li>'+ 
         '<input type="checkbox" name="'+arr[arrayIndex][1]+'" id="'+arr[arrayIndex][0]+'-'+arr[arrayIndex][1]+'" />'+ 
         '<label>'+arr[arrayIndex][1]+'</label>'+ 
        '<li>'; 

        $('#'+arr[arrayIndex][0]+' > ul').append(list); 

     } 

尝试。这应该工作，但我没有检查代码，我认为逻辑是正确的