How to create a menu from multiple lists?

Question

JavaScript

Hello! I got a little problem.
There are n ul lists , from which I form an adaptive menu. It looks like this:

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

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

And everything is great. Html looks like this:

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

But I need a small addition, each list in the header has a data-title attribute , which contains the title text to show it in the responsive menu. I want to display this title above my list in the generated menu. It should turn out like this:

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

Help me please!

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