使用jquery在json中获取子li值及其父ul值答案

【问题标题】：Get the child li value with its parent ul value in a json using jquery使用jquery在json中获取子li值及其父ul值
【发布时间】：2017-10-08 04:36:11
【问题描述】：

我在ul 下有一个无序列表和一些li 元素。我无法按预期获得 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？

【问题讨论】：

我研究了很多，但为什么要投反对票？
我没有投反对票，但我想除了添加链接之外，如果您可以在此处添加代码 sn-p 以及问题看起来会更完整。而不是粘贴一堆链接。

标签： jquery html json

【解决方案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/

【讨论】：

【解决方案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; })
    });
});

希望对你有帮助

【讨论】：