2017-10-08 52 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