关于javascript：jquery基于JSON数据填充ul和li

jquery to populate ul and li, based on JSON data

下面的代码创建5个ul，并将li填充到所有.dropdown菜单中。
我如何使用JSON数据(或者也许有更好的方法)让jquery填充正确的ul？

预期产量：
并非所有幻灯片都进入所有模块。.仅某些幻灯片应进入JSON数据中所示的特定模块。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

相关讨论

将模块mod添加为DOM对象的属性，可以让您稍后选择它来区分哪些幻灯片在哪里。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

您似乎想做的很简单。我认为您正在尝试将子列表分为适当的父母。只需在与父循环相同的范围内运行循环即可。然后，您知道什么属于哪里！

使用以下几种jQuery"功能"(例如 $ .each， $.('') 和 $ .fn.addClass())的方法如下：

Just FYI, without all the comments and split up items of description, the later code could be as short and simple as the following: _{and could even by tidied up to be even less!}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(function() {
$.each(listMenu.List, function(ind, arr) {
var a = $('', { 'data-toggle': 'dropdown', href: 'javascript:void(0)' }).addClass('dropdown-toggle').text(arr.menutitle),
span = $('<span />').addClass('caret').appendTo(a),
ul = $('<ul />');
$.each(listSlide.List, function(slideInd, slideArr) {
if (slideArr.mod == arr.mod) {
var li = $('<li />').appendTo(ul);
$('', { href: 'javascript:void(0)' }).addClass('link').text(slideArr.slidetitle).appendTo(li);
}
});
$('.test').append(a, ul);
});
});

举例说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

1	.test > a { display: block; }

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

我的建议基于直接在jQuery中创建新元素，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13

var dp = $('', {class: 'dropdown'})
.append($('<button/>', {
class: 'btn btn-default dropdown-toggle',
type: 'button',
id: 'dropdownMenu' + index,
'data-toggle': 'dropdown',
'aria-haspopup': true,
'aria-expanded': true
}).append(ele.menutitle).append($('<span/>', {class: 'caret'})))
.append($('<ul/>', {
class: 'dropdown-menu',
'aria-labelledby': 'dropdownMenu' + index
}));

片段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

1
2
3

使用data-*属性，该属性保存每个ul上的mod值，然后根据该值获取ul。您可以使用一个对象来保存生成的HTML字符串。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

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