将对象转换为ul-li元素
Convert object to ul li elements
我在数组中有一个对象列表
var myLevel = ['sub', 'topic', 'type']
var myCollection = new Array();
myCollection.push({sub: 'Book 1', topic: 'topic 1', type: 'mcq'});
myCollection.push({sub: 'Book 1', topic: 'topic 1', type: 'mcq'});
myCollection.push({sub: 'Book 1', type: 'fib', topic: 'topic 2'});
myCollection.push({sub: 'Book 1', topic: 'topic 1', type: 'mtf'});
myCollection.push({sub: 'Book 1', topic: 'topic 1', type: 'mcq'});
myCollection.push({sub: 'Book 2', type: 'mcq', topic: 'topic 1'});
myCollection.push({sub: 'Book 2', topic: 'topic 1', type: 'mcq'});
myCollection.push({sub: 'Book 2', topic: 'topic 1', type: 'mcq'});
我想用ul和li将这些东西转换成合适的列表,而且列表的级别取决于myLevel变量。
- 第1册
- 主题1
- mcq
- mtf
- 主题2
- fib
- 主题1
- 第2册
- 主题1
- mcq
- 主题1
每个部分都有一个独特的子部分,不可能有相同的子部分。
我已经尝试将元素创建到myCollection 的循环中
for(var i=0; i<myCollection.length; i++)
{
for(var j=0; j<myLevel.length; j++)
{
createMyTree(myCollection[i][myLevel[j]);
}
}
function createMyTree(str)
{
//?????????????
}
请帮助我如何创建所需级别的元素。
好的,所以我重新编辑了它,它有效,除非有一个问题:主题1被分成两个主题1,因为主题2被插入它们之间。
var myLevel = ['sub', 'topic', 'type'];
var myCollection = new Array();
myCollection.push({sub: 'Book 1', topic: 'topic 1', type: 'mcq'});
myCollection.push({sub: 'Book 1', topic: 'topic 1', type: 'mcq'});
myCollection.push({sub: 'Book 1', type: 'fib', topic: 'topic 2'});
myCollection.push({sub: 'Book 1', topic: 'topic 1', type: 'mtf'});
myCollection.push({sub: 'Book 1', topic: 'topic 1', type: 'mcq'});
myCollection.push({sub: 'Book 2', type: 'mcq', topic: 'topic 1'});
myCollection.push({sub: 'Book 2', topic: 'topic 1', type: 'mcq'});
myCollection.push({sub: 'Book 2', topic: 'topic 1', type: 'mcq'});
var dom="<ul>";
var used = new Array();
var currentItems = new Array(myLevel.length);
var lastJ = -1;
for(var i=0; i<myCollection.length; i++)
{
var con = false;
for(var k=0; k<used.length; k++){
if(compareObjects(used[k], myCollection[i]))
con = true;
}
if(!con){
for(var j=0; j<myLevel.length; j++){
if(currentItems[j] !== myCollection[i][myLevel[j]]){
if(lastJ !== -1){
for(var l=0; l<lastJ-j; l++){
dom+="</ul></li>";
}
}
for(var l=j+1; l<currentItems.length; l++)
currentItems[l] = "";
currentItems[j] = myCollection[i][myLevel[j]];
dom+="<li>"+currentItems[j]+(j<myLevel.length-1?"<ul>":"");
lastJ = j;
}
}
used.push(myCollection[i]);
}
}
dom+="</ul>";
$('body').html(dom);
function compareObjects(obj1, obj2){
if(obj1.length != obj2.length)
return false;
for(var el in obj1){
if(obj2[el] === undefined)
return false;
if(obj1[el] !== obj2[el])
return false;
}
return true;
}
似乎经过很多努力,我已经用一些技巧得到了答案。
var $out;
$(document).ready(function()
{
for(var i=0; i<myCollection.length; i++)
{
$out = $('#out');
for(var j=0; j<levelTree.length; j++)
{
var itemName = myCollection[i][levelTree[j]];
var level = j;
/**********************************************************/
var $con;
if($out.children().eq(0).length == 0)
{
$con = $('<ul></ul>');
$con.append('<li>'+ itemName + '</li>');
$out.append($con);
}
else
{
var flag = $out.children().eq(0).children().filter(function(i, e)
{
return (this.childNodes[0].textContent == itemName);
});
console.log(flag.length);
if(flag.length == 0)
{
$out.children().eq(0).append('<li>' + itemName + '</li>');
}
}
var ele = $out.children(0).eq(0).children().filter(function(i, e)
{
return (this.childNodes[0].textContent == itemName);
}).get();
$out = $(ele);
/**********************************************************/
}
}
});
这可以通过递归来提高效率。但它很火D
JSFiddle
相关文章:
- 自动完成搜索无法正常工作,请不要迭代$中的所有元素.每个ul-li都会及时显示响应
- 从ul中删除li元素
- 通过javascript循环UL中的LI元素
- 在 javascript 中创建 ul 和 li 元素
- 设计模式下的浏览器将孤立的 LI 元素包装在 UL - Firefox 和 Chrome 中
- 将 ul 添加到现有 UL 中的 Li 元素
- 将数组对象转换为嵌套的 ul li 元素
- 将对象转换为ul-li元素
- 在上述ul类的基础上给出li元素类
- 如何访问ul标签中的li元素
- 使用javascript访问ul中的li元素
- JQuery ul li点击移动到列表中的下五个元素
- 在ul中的特殊LI元素内的一个子DIV中的toggleClass()
- UL LI元素在单击向上和向下按钮jQuery时自动滚动
- 需要将每个post元素附加到滑块的每个ul-li
- 如何在点击按钮3-5秒后显示动态添加的UL Li元素
- 如何创建嵌套的li-ul-li元素
- 自定义样式化UL/LI元素
- 定义我的导航的JSON有标题类型和类别类型;d希望转换为Javascript中的嵌套UL LI元素
- Jquery / javascript在html中插入ul / li元素