Question

我已经尝试了很多创建嵌套ul / li的答案，但似乎无法创建一个。我是js的新手。

在页面加载后抓取数据，并采用这样的格式

<ul>
  <li>
    key1
    <ul>
      <li>value1</li>
      <li>value2</li>
      <li>value3</li>
    </ul>
  </li>
  <li>
    key2
    <ul>
      <li>value4</li>
      <li>value5</li>
      <li>value6</li>
    </ul>
  </li>
  <li>
    key3
    <ul>
      <li>value7</li>
    </ul>
  </li>
</ul>

作为奖励，我希望点击一个键并下拉（展开）以显示值。但是我没有在下面的结构中加载数据。可以有任意数量的键，具有任意长度的值（列表）。此外，键可以命名任何东西。

jQuery(document).ready(function($) {

$.get('url', function(data){

            var $ul = $('<ul></ul>');

            function getList(item, $list) {

                $.each(item, function (key, value) {
                    var $li = $('<li />');
                    $li.append($('<a href="#">' + key + '</a>'));

                    var $subul = $("<ul/>");

                    $.each(value, function(i) {
                        var subli = $('<li/>')
                        .text(value[i])
                        .appendTo(subli);
                    });
                    $subul.append(subli);


                    $li.append($subul)

                });
            }
            getList(data, $ul);
            $ul.appendTo("div_containing_ul");
    });});

我更新了添加我一直在尝试的jquery代码。我没有包含它，因为我尝试了很多变种来获取上面嵌套结构中的数据，我可能做错了。

An error occurred: IamRoleLambdaExecution - API: iam:GetRole 
User: arn:aws:iam::XXXXXXXXXXX:user/awsstudent is not authorized to perform: 
iam:GetRole on resource: role hello-world-dev-us-west-2-lambdaRole.

Answer 1

错误和缺少追加。

ctrl+space应该是.appendTo(subli);，在功能结束时，您需要将.appendTo($subul);添加到$li。

$list

data = {
  "key1": ["value1", "value2", "value3"],
  "key2": ["value4", "value5", "value6"],
  "key3": ["value7"]
}

jQuery(document).ready(function($) {

  var $ul = $('<ul></ul>');

  function getList(item, $list) {

    $.each(item, function(key, value) {
      var $li = $('<li />');
      $li.append($('<a href="#">' + key + '</a>'));

      var $subul = $("<ul/>");

      $.each(value, function(i) {
        var subli = $('<li/>')
          .text(value[i])
          .appendTo($subul); // you need to append it to the $subul not the $subli
      });


      $li.append($subul).appendTo($list); // you need to append the $li to the $list

    });
  }
  getList(data, $ul);
  $ul.appendTo("#div_containing_ul");
});

Answer 2

问题是递归。如果嵌套级别只有2级深度，你不知道这些数据是否总是那样。

我用递归重写了你的例子，它考虑了无数级别的菜单。

jQuery(document).ready(function ($) {


    function caller(data) {
        var $ul = $('<ul></ul>');
        recursiveCaller(data, $ul);
        return $ul;
    }

    function recursiveCaller(subdata, $parent) {
        if( typeof subdata === 'object' ) {
            for(var key in subdata) {
                $parent.text(key)
                var $sublist =  $('<ul></ul>');
                recursiveCaller(subdata[key], $sublist);
            }
        } else {
            var $child = $('<li></li>');
            $child.text(subdata)
            $parent.append($child);
        }
    }

    $.get('url', function () {
        var $menu = caller(data);
        $('#div_containing_ul').append($menu);
    });
});

这很容易处理像

这样的结构

var data = {
    'key1': ['val1', 'val2', 'val3'],
    'key2': [
        {'key2': ['val4', 'val5', 'val6']},
        'val5',
        'val6'],
    'key3': [
        {
            'key2':
                {
                    'key2': [
                        'val4',
                        {
                            'key2': ['val4', 'val5', 'val6']
                        },
                        'val6'],
                    0: 'val5',
                    1: 'val6'
                }
        }]
};

祝你好运

Answer 3

一个简短的递归版本，效果很好：

function buildList(data) {
    var $ul = $('<ul></ul>');
    for (const key in data) {
        var $child = $('<li></li>');
        $ul.append($child)
        if (typeof data[key] === 'object') {
            $child.text = $child.text(key);
            $child.append(buildList(data[key]));
        } else {
            $child.text = $child.text(key + ' : ' + data[key]);
        }
    }
    return $ul;
}

我向函数提供一个包含时间戳的对象数组，一个Partner对象以及一个包含Company对象的Partner对象；结果看起来像这样：

0
    timestamp : 1587732029600
    partner
        id : 0
        name : Name1
        email : a@b.com
        company
            id : 0
            name : SomeCompany1
1
    timestamp : 1587732029600
    partner
        id : 1
        name : Name2
        email : c@d.com
        company
            id : 1
            name : SomeCompany2

使用jQuery创建嵌套列表

3 个答案: