jQuery从JSON创建嵌套列表

tsm1rwdh  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(109)

我试图用我有限的jQuery知识弯曲一些现有的代码,很好,我正在学习,我试图做一个嵌套的链接列表,最终的结果将是列表的顶层是“类别”,然后是一个嵌套的UL链接使用“url”和“文本”。

(我不在乎顶层是否链接,我可以修改这部分代码)
任何帮助都将被赞赏。

$(document).ready(function () {
    var $ul = $('<ul></ul>');
    var usefullinks = [
  {
    "category": "Category 2",
    "links": [
      {
        "url": "https://example.org",
        "text": "Some Link"
      }
    ]
  },
  {
    "category": "Test",
    "links": [
      {
        "url": "http://google.net",
        "text": "Link 1"
      },
      {
        "url": "https://example.com",
        "text": "Link 2"
      }
    ]
  }
];
    getList(usefullinks, $ul);
    $ul.appendTo(".main");
});

function getList(item, $list) {
    
    if($.isArray(item)){
        $.each(item, function (key, value) {
            getList(value, $list);
        });
        return;
    }
    
    if (item) {
        var $li = $('<li/>');
        if (item.category) {
            $li.append($('<a href="#">' + item.category + '</a>'));
        }
        if (item.links && item.links.length) {
            var $sublist = $('<ul/>');
            getList(item.links, $sublist);
            $li.append($sublist);
        }
        $list.append($li)
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">

</div>
rqcrx0a6

rqcrx0a61#

你的递归函数很好,你只是忘记了对urltext做任何事情。

if (item) {
    var $li = $('<li/>');
    if (item.category) {
        $li.append($('<a href="#">' + item.category + '</a>'));
    }

    // 👇
    if (item.text) {
        $li.append($(`<${item.url ? 'a' : 'span'}/>`, {
            href: item.url,
            text: item.text
        });
    }
    // 👆

    if (item.links && item.links.length) {
        var $sublist = $('<ul/>');
        getList(item.links, $sublist);
        $li.append($sublist);
    }
    $list.append($li)
}

相关问题