JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container"></div>
CSS
ul li {
margin-left: 5px;
opacity: .85;
}
ul li:first-child a {
color: red;
}
ul li a {
color: black;
display: block;
}
JavaScript
var Menu = function(data) {
this.data = data;
};
Menu.prototype.render = function() {
//console.log(this.data)
var ul = $("<ul />");
$.each(this.data, function(i, e) {
var li = $("<li />");
$.each(e, function(j, f) {
li.append($("<a></a>", {
href: f.url,
text: f.title
}));
});
ul.append(li);
});
return ul;
};
Menu.renderMenus = function(menus, root) {
$.each(menus, function(key, val) {
var m = new Menu(val),
ul = m.render();
ul.appendTo(root);
});
}
var menu =
[
[//first ul
[ //first li
{ //first <a> element
title: "First UL, First li, First a",
menuCaption: "Best Known For Caption",
url: "/best-known-for"
},
{ //second <a> element
title: "First UL, First li, Second a",
menuCaption: "Best Known For Caption",
url: "/best-known-for"
}
],
[ //second li
{ //only <a> element
title: "First UL, Second li, First a (not first-child, and not red)",
menuCaption: "Choose a life Event",
url: "/life-events"
}
]
],
[//second ul
[ //first li in second ul
{ //only <a> element
title: "Second UL, First li, First a",
menuCaption: "Hello Kitty",
url: "/google"
},
{ //second <a> element
title: "Second UL, First li, Second a",
menuCaption: "Best Known For Caption",
url: "/best-known-for"
}
]
]
];
Menu.renderMenus(menu, $("#container"));