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

enter image description here

(我不在乎顶层是否链接,我可以修改代码的这一部分)

任何帮助都会受到欢迎.

$(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>

推荐答案

您的递归函数很好,只是忘记了对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)
}

Jquery相关问答推荐

使用jQuery筛选器搜索输入仅适用于单词的一部分

DataTables - this.api 用于回调函数中的多个表

如何使 jQuery.ready 中定义的函数在全局可用?

Twitter Bootstrap 是否包含 jQuery?

jQuery从下拉列表中删除一个选项,给定选项的文本/值

如何使用 jQuery 将分钟转换为小时/分钟并添加各种时间值?

这些 jQuery 就绪函数之间有什么区别?

window.onbeforeunload 和 window.onunload 在 Firefox、Safari、Opera 中不起作用?

如何使用 jquery 更改 onclick 事件?

从父 node 中删除所有子 node ?

未捕获的 TypeError:data.push 不是函数

使用 jQuery 将宽度设置为百分比

如何检测是否安装了 Flash,如果没有,显示一个隐藏的 div 通知用户?

判断文本框是否有空值

在 bootstrap 弹出窗口中包含表单?

!!~(不是波浪号/bang bang 波浪号)如何改变包含/包含数组方法调用的结果?

Url.Action 在我的 url 中放了一个 &,我该如何解决这个问题?

使用 jQuery 将事件侦听器添加到动态添加的元素

jQuery或javascript查找页面的内存使用情况

自调用函数前的分号?