var listMenu = JSON.parse('{"List":[{"menutitle":"Module 1","mod":"1"},{"menutitle":"Module 2","mod":"2"},{"menutitle":"Module 3","mod":"3"},{"menutitle":"Module 4","mod":"4"},{"menutitle":"Module 5","mod":"5"}]}'),
listSlide = JSON.parse('{"List":[{"slidetitle":"Slide 1","mod":"1"},{"slidetitle":"Slide 2","mod":"1"},{"slidetitle":"Slide 3","mod":"1"},{"slidetitle":"Slide 4","mod":"1"},{"slidetitle":"Slide 5","mod":"2"},{"slidetitle":"Slide 6","mod":"2"},{"slidetitle":"Slide 7","mod":"3"},{"slidetitle":"Slide 8","mod":"3"},{"slidetitle":"Slide 9","mod":"3"},{"slidetitle":"Slide 10","mod":"4"},{"slidetitle":"Slide 11","mod":"4"},{"slidetitle":"Slide 12","mod":"5"},{"slidetitle":"Slide 13","mod":"5"},{"slidetitle":"Slide 14","mod":"5"},{"slidetitle":"Slide 15","mod":"5"}]}');
// this shorthand expression is same as `$(document).ready(function(){`, FYI, you don't have to write this over and over, once is enough.
$(function() {
// filter through the parent list that will make each list
$.each(listMenu.List, function(ind, arr) {
// basics to making an element object in jQuery:
// `$("<tagName />", { attributes: value })`
var a = $('<a />', { 'data-toggle': 'dropdown', href: 'javascript:void(0)' }).text(arr.menutitle), // create head link element // use of javascript:void(0) tends to be prefered over # unles u have specific purpose for such
span = $('<span />').appendTo(a), // create caret span & insert into our a tag
ul = $('<ul />') // create ul element
// add Classes // only did this here for simplicity of view
// Just FYI, this can be done in one line when establish variable above.
// Return is always the jQuery Element Object
a.addClass('dropdown-toggle');
span.addClass('caret');
// no need for an extra loop after this one, lets just loop through our sub list here
// quick and easy and you can associate better what belongs where without use of extra ID's and such
$.each(listSlide.List, function(slideInd, slideArr) {
if (slideArr.mod == arr.mod) { // check if item belongs in this list
var li = $('<li />').appendTo(ul), // create li element & insert into our list
liA = $('<a />', { href: 'javascript:void(0)' }).addClass('link').text(slideArr.slidetitle).appendTo(li); // create and append
}
});
$('.test').append(a, ul);
});
// Just for a little fun and further education, let's add some functionality!
// Here, I'll assign "events" to slide the list up and down,
// but the elements are added "dynamically", so I'll instead assign the events to
// a "static parent" (in this case the DOM) and associate what elements
// the event belongs to with my 2nd parameter.
// Read more about this here: http://api.jquery.com/on/
$(document)
.on('click', '.dropdown-toggle', function(e) {
// this is the HTML element,
// wrapping it in $() gives us jQuery object methods!
// Read about the .next method here: http://api.jquery.com/next/
// I use $.stop to stop and complete any animation in progress (multiclicking issues)
// Read about .stop here: http://api.jquery.com/stop/
// I use slideToggle to make the menu go up and down!
// Read about .slideToggle here: http://api.jquery.com/slideToggle/
$(this).next('ul').stop(true, true).slideToggle();
}) // finally, notice i did not close this `);`
// This is because I wanted to show you, you can use jQuery "chaining"
// to continue. So, if you wanted to add more events for other elements,
// you would just put a `.on(` and keep going, like so:
//
// $(document)
// .on('event', 'selector', function(e) {})
// .on('event', 'selector', function(e) {})
// .on('event', 'selector', function(e) {})
// .on('event', 'selector', function(e) {})
// .on('event', 'selector', function(e) {})
});
.test > a { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="test"></div>
