レンダリングul liのリストは親のjqueryに従って

Question

私は空でもよいし、異なる親を持つアイテムで次のようにすることもできます。どのように多くのアイテムが多くのタイプのparentの科目を持つことができるかは決してありません。トリックは、これは、以下のリスト

<ul>Fruit 
    <li>Apple</li> 
    <li>Banana</li> 
</ul> 

<ul>Vegetables 
    <li>Lettuce</li> 
    <li>Carrots</li> 
</ul> 

Answer 1

をしたいのソリューションですの一例である

{ 
    "parent": "Vegetables", 
    "title": "Carrots" 
}, 
{ 
    "parent": "Fruit", 
    "title": "Apple" 
}, 
{ 
    "parent": "Vegetables", 
    "title": "Lettuce" 
}, 
{ 
    "parent": "Fruit", 
    "title": "Banana" 
} 

UL LIリストに両親に応じてグループに項目です

まず、アイテムリストをその親の名前でグループ化する必要があります。次に、グループ化された項目をループして、それらを印刷します。

p/s：予想される出力構造が正しくないようです。

<ul>Fruit</ul> 
<li>Apple</li> 
<li>Banana</li> 

もしかして：

<ul> 
    <li>Fruit 

     <ul> 
      <li>Apple</li> 
      <li>Banana</li> 
     </ul> 
    </li> 
</ul> 

var items = [{ 
 
    "parent": "Vegetables", 
 
    "title": "Carrots" 
 
}, { 
 
    "parent": "Fruit", 
 
    "title": "Apple" 
 
}, { 
 
    "parent": "Vegetables", 
 
    "title": "Lettuce" 
 
}, { 
 
    "parent": "Fruit", 
 
    "title": "Banana" 
 
}]; 
 

 
var groups = {}; 
 
items.forEach(item => { 
 
    if (!groups.hasOwnProperty(item.parent)) { 
 
     groups[item.parent] = []; 
 
    } 
 

 
    groups[item.parent].push(item.title); 
 
}); 
 

 
var result = ''; 
 
for (var name in groups) { 
 
    result += '<ul>' + name + '</ul>'; 
 

 
    groups[name].forEach(item => result += '<li>' + item + '</li>'); 
 
} 
 

 
container.innerHTML = result;

<pre id="container"></pre>

Answer 2

と思いますが、あなたが

Script: 

<script> 
$(document).ready(function(){ 
    var array_list = [{ 
    "parent": "Vegetables", 
    "title": "Carrots" 
}, 
{ 
    "parent": "Fruit", 
    "title": "Apple" 
}, 
{ 
    "parent": "Vegetables", 
    "title": "Lettuce" 
}, 
{ 
    "parent": "Fruit", 
    "title": "Banana" 
}]; 
var veg = array_list[0].parent; 
var fruit = array_list[1].parent; 
for(i=0;i<array_list.length;i++){ 
    if(array_list[i].parent == veg){ 
      $(".type").append("<li>"+array_list[i].parent+"</li><li>"+array_list[i].title+"</li>"); 
    }else if(array_list[i].parent == fruit){ 
      $(".type").append("<li>"+array_list[i].parent+"</li><li>"+array_list[i].title+"</li>"); 
    } 
} 
}); 
</script> 

HTML: 

<ul class="type"></ul> 

Now by add style to the list as you like. 

Hope this is helpful.