Как сформировать меню из нескольких списков?

Question

[Дима Паутов]

Всем привет! У меня возникла небольшая проблема.
Есть n списков ul, из них я формирую адаптивное меню. Выглядит это так:

var leftMenuContent = $('#header .menuList'); // Соберём все ссылки в шапке

		$('<nav />', {
			id: 'leftMenu',
			html: leftMenuContent
		}).prependTo('body');

И все супер. Html получается таким:

<nav id="leftMenu">
	<ul class="menuList" data-title="О нас">
		<li></li>
		<li></li>
	</ul>
	<ul class="menuList" data-title="Выберите услугу">
		<li></li>
		<li></li>
	</ul>
	<ul class="menuList">
		<li></li>
		<li></li>
		<li></li>
	</ul>
</nav>

Но мне нужно маленькое дополнение, каждый список в шапке, имеет атрибут data-title, в котором лежит текст заголовка, что бы показать его в адаптивном меню. Я хочу сделать вывод этого заголовка над своим списком в сформированном меню. Должно получиться так:

<nav id="leftMenu">
	<h4>О нас</h4>
	<ul class="menuList" data-title="О нас">
		<li></li>
		<li></li>
	</ul>
	<h4>Выберите услугу</h4>
	<ul class="menuList" data-title="Выберите услугу">
		<li></li>
		<li></li>
	</ul>
	<ul class="menuList">
		<li></li>
		<li></li>
		<li></li>
	</ul>
</nav>

Помогите пожалуйста!

Answer 1

[Алексей Уколов]

jsfiddle.net/koceg/57bunxgp

$('#leftMenu .menuList').each(function (i, el) {
	var $el = $(el),
    	title = $el.data('title');

    if (title)
    {
        $el.before('<h4>' + title + '</h4>');
    }
});

Answer 2

[Кирилл Туровников]

Так jsfiddle.net/straj/wd50qbs3

$('#leftMenu .menuList').each(function(){
	var title = $(this).data('title');
    if(title) $(this).prepend('<h4>'+title+'</h4>');
});