2017-10-08 55 views
-1

我有一个无序列表和ul下的一些li元素。我无法获得我期望的ulli值。我试了好几种资源如下:使用jquery在json中获取其父辈ul值的子li值

http://jsfiddle.net/mohammadwali/tkhb5/

how-do-i-convert-the-items-of-an-li-into-a-json-object-using-jquery

jquery-tree-traversal-nested-unordered-list-elements-to-json

我的代码是在这里为下文小提琴:

My code is in this fiddle

我预期的输出结果如下:

[{ 
    "id": "1", 
    "category": "Parking", 
    "subcategory": [ 
     "Street Parking", 
     "Bus Parking" 
    ] 
}] 

我该如何实现JSON?

+0

我researced了很多,但为什么下降投票? – RidwanulHaque

+1

我没有投票,但我想除了添加链接,如果你可以在这里添加你的代码片段以及问题看起来更完整。而不是粘贴一堆链接。 – warl0ck

回答

1

试试这个:
请注意,我已经通过在顶部li元素中添加data-name来更改html。

var mylist = []; 
$(".nameList > li").each(function() { 
    mylist.push({}); 
    var self = mylist[mylist.length-1]; 
    self.subcategory = []; 
    self.id = $(this).attr("value"); 
    self.category = $(this).attr("data-name"); 
    $(this).find("ul > li").each(function(){ 
    self.subcategory.push($(this).html()); 
    }); 
    console.log(self); 
}); 

而且这里有一个小提琴:
http://jsfiddle.net/tkhb5/262/

1

如果你不能碰的HTML,在这里你有一个选项...

var myList = []; 

$('ul.nameList > li').each(function() { 
    myList.push({ 
     "id": $(this).val(), 
     "category": $(this).clone().children('ul.subcatList').remove().end().text().trim(), 
     "subcategory": $(this).find('ul.subcatList li').toArray().map(function(value) { return value.innerHTML; }) 
    }); 
}); 

...但如果你能,我会将类别名称放在某个元素中,以便于选择它。您可以使用...

<li value="1"><span class="cattitle">Parking</span> 
    <ul class="subcatList"> 
    <li>Street Parking</li> 
    <li>Bus Parking</li> 
    <li>Complementary Parking</li> 
    </ul> 
</li> 
<li value="2"><span class="cattitle">Business Services</span> 
    <ul class="subcatList"> 
    <li>Business Center</li> 
    <li>A/V Capabilities</li> 
    <li>Video Conferencing</li> 
    </ul> 
</li> 
........ 

...所以你可以简化jQuery的...

var myList = []; 

$('ul.nameList > li').each(function() { 
    myList.push({ 
     "id": $(this).val(), 
     "category": $(this).children('span.classtitle').text(), 
     "subcategory": $(this).find('ul.subcatList li').toArray().map(function(value) { return value.innerHTML; }) 
    }); 
}); 

我希望它能帮助

+0

你的回答也是正确的。 – RidwanulHaque