根据他们的父级jquery呈现ul li列表

-3

我有一个动态数组，可以是空的或者可以像以下具有不同父项的项一样。你永远不会有多少项目可以与许多类型的parent科目。诀窍是集团的项目根据他们的父母到一个UL李名单根据他们的父级jquery呈现ul li列表

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

这是下面的列表中的一个例子

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

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

来源

2017-04-10 Grzes Slania

的解决方案可以在[jQuery的排序和组里的元素（HTTP的角度 – Ram

可能重复：//计算器.com/questions/9417325/jquery-ordering-and-group-li-elements） –

我正在寻找jQuery解决方案或JavaScript。我正在构建的是非常小的，所以我没有使用任何框架。 –

解决方案

首先，您应该将项目列表按其父项名称分组。然后，循环分组项目并将其打印出来。

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>

来源

2017-04-10 05:41:30

认为这是你想要

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.

来源

2017-04-10 05:31:14 Ram

根据他们的父级jquery呈现ul li列表

回答

相关问题