带有对象值的jQuery附加元素答案

【问题标题】：jQuery append element with object values带有对象值的jQuery附加元素
【发布时间】：2017-11-08 13:32:17
【问题描述】：

我想根据对象option 中包含的值附加一个<ul> 元素。我希望在顶层<ul> 下添加<li> 元素，然后如果该对象包含另一个值，则添加一个子<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>

【问题讨论】：

您的 if/else 条件在哪里...如果您正在检查值？

标签： javascript jquery json object

【解决方案1】：

如果您只有 2 个级别，那么 Carsten 的答案将非常有效。如果存在任意深度，则需要递归解决方案。

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)
})

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


<ul id="list"></ul>

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

【讨论】：

这对我应该有用的一些调整有很大帮助。谢谢

【解决方案2】：

我有点不清楚你 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>

【讨论】：