Question

我想根据对象<ul>中包含的值附加option元素。我希望在顶级<li>下添加<ul>元素，然后如果该对象包含其他值，则添加一个包含更多<ul>个元素的子<li>等......

我已经整理了第一个级别，为每个第一级选项创建<li>，但是添加另一个.each()函数之前会创建一个随机[object Object]，并且子选项不会出现。按顺序排序。

我可以根据需要建议如何使用我的示例代码。

<ul id="menu">
</ul>

<script>
var option = {
    'option 1' : {
        'option 1 sub option 1' : {},
        'option 1 sub option 2' : {},
        'option 1 sub option 3' : {}

    },
    'option 2' : {
        'option 2 sub option 1' : {},
        'option 2 sub option 2' : {}
    },

    'option 3' : {
        'option 3 sub option 1' : {},
        'option 3 sub option 2' : {}
    }
}

var menu = $('#menu'); // target menu container

$.each(option, function(key, value) {

$(menu).append('<li data-option="' + key + '">' + key +
(value === 'undefined' ? '' : '<ul class="menu2">'
+

// Add more <li> elements for each sub option contained under each option
$.each(value, function(key, value) {
    $('.menu2').append(key);
})

+ '</ul>') + 
'</li>');

});

</script>

Answer 1

我有点不清楚你想要100％，但尝试以下

var menu = $('#menu'); // target menu container
$.each(option, function(key, value) {
  var elem = "<li>" + key + "<ul>";
  $.each(value, function(i, x) {
    elem += "<li>" + i + "</li>"
  })
  elem += "</ul></li>"
  menu.append(elem);
});

<强>演示

var option = {
  'option 1': {
    'option 1 sub option 1': {},
    'option 1 sub option 2': {},
    'option 1 sub option 3': {}

  },
  'option 2': {
    'option 2 sub option 1': {},
    'option 2 sub option 2': {}
  },

  'option 3': {
    'option 3 sub option 1': {},
    'option 3 sub option 2': {}
  }
}

var menu = $('#menu'); // target menu container
$.each(option, function(key, value) {
  var elem = "<li>" + key + "<ul>";
  $.each(value, function(i, x) {
    elem += "<li>" + i + "</li>"
  })
  elem += "</ul></li>"
  menu.append(elem);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
</ul>

Answer 2

如果你只有2个级别，Carsten的答案将完美无缺。如果有任意深度，你需要一个递归的解决方案。

＆＃13;

var option = {
    'option 1' : {
        'option 1 sub option 1' : {},
        'option 1 sub option 2' : {},
        'option 1 sub option 3' : {}

    },
    'option 2' : {
        'option 2 sub option 1' : {},
        'option 2 sub option 2' : {}
    },

    'option 3' : {
        'option 3 sub option 1' : {},
        'option 3 sub option 2' : {}
    }
}

function buildList(ul,data){
	for(var key in data){
		var li = $('<li>'+key+'</li>')
		if(!jQuery.isEmptyObject(data[key])){ // checks if there is another <ul> necesarry
			var sub_ul = $('<ul></ul>')
			buildList(sub_ul,data[key]) // do the same for the sub-ul
			li.append(sub_ul)
		}
		ul.append(li)
	}
}

$(document).ready(function(){
  buildList($('#list'),option)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul id="list"></ul>

＆＃13;

您可以通过调用buildList()并传递应放置列表的目标ul元素以及数据来使用它。

jQuery使用对象值追加元素

2 个答案: