使用jquery在json中獲取子li值及其父ul值

Question

我在ul下有一個無序的列表和一些li元素。 我無法獲得我期望的ul和li值。 我嘗試了以下幾種資源：

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

我如何將li的項目轉換為使用jQuery的json對象

jQuery的樹遍歷嵌套到JSON的無序列表元素

我的代碼在下面的小提琴中：

我的代碼在這個小提琴中

我的預期輸出如下：

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

如何實現JSON？

Answer 1

嘗試這個：
請注意，通過將data-name添加到頂部li元素，我對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/

Answer 2

如果您無法觸摸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; })
    });
});

希望對您有所幫助