Создать опцию «Подменю» для навигации

Question

Я использую следующий код для преобразования стандартной навигации в меню выбора для отзывчивой темы в Wordpress.

jQuery(document).ready(function ($) { 
    $("<select />").appendTo("nav"); 

    $("<option />", { 
     "selected": "selected", 
     "value": "", 
     "text": "Go to..." 
    }).appendTo("nav select"); 

    $("nav a").each(function() { 
     var el = $(this); 
     $("<option />", { 
      "value": el.attr("href"), 
      "text": el.text() 
     }).appendTo("nav select"); 
    }); 

    $("nav select").change(function() { 
     window.location = $(this).find("option:selected").val(); 
    }); 

    $('#navigasi_menu_reseponsive').remove(); 
}); 

Все работает нормально с помощью вышеуказанного кода. Мне интересно, как добавить условие для работы с подменю. Например, это html по умолчанию, создаваемый навигацией WordPress.

<nav> 
    <div id="navigasi_menu_reseponsive"> 
     <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-500"> 
      <a href="http://localhost/themes123/category/portfolio/">Custom Color</a> 
     </li> 
     <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-349"> 
      <a href="#">Category</a> 
      <ul class="sub-menu"> 
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-246"> 
        <a href="http://localhost/themes123/category/interior/">Interior</a> 
       </li> 
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-548"> 
        <a href="http://localhost/themes123/category/portfolio/">Portfolio</a> 
       </li> 
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-245"> 
        <a href="http://localhost/themes123/category/lifestyle/">Lifestyle</a> 
       </li> 
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-367"> 
        <a href="http://localhost/themes123/category/examples/">Examples</a> 
       </li> 
      </ul> 
     </li> 
    </div> 
</nav> 

Я хотел бы сделать это перед именем «-» для каждого ул, которая имеет класс подменит, так что мой список выглядит следующим образом:

Перейти ...

Категории (это было бы родительским)

- Интерьер (это будет ребенок с '-')

- Портфолио (это было бы ребенка с '-')

- Lifestyle

- Примеры

и т.д ...

Может кто-то помочь? Спасибо

Answer 1

Нравится?

http://jsfiddle.net/SzBcm/2/

$('ul.sub-menu li a').each(function(index, item) { 
    $(this).text('--' + $(this).text()); 
}); 

Answer 2

DEMO

$('.sub-menu li').prepend('--'); 

обновление

DEMO

$('.sub-menu li a').prepend('--') 

Answer 3

Попробуйте

jQuery(function ($) { 
    var $select = $("<select />").appendTo("nav"); 

    $("<option />", { 
     "selected": "selected", 
     "value": "", 
     "text": "Go to..." 
    }).appendTo($select); 

    function add($ct, $a){ 
     $("<option />", { 
      "value": $a.attr("href"), 
      "text": $a.text() 
     }).appendTo($ct); 

    } 

    function addGroup($group, $ul){ 
     $ul.children().each(function(){ 
      var $li = $(this), $a = $li.children('a'); 
      add($group, $a) 
     }) 
    } 

    $('#navigasi_menu_reseponsive > li').each(function(){ 
     var $li = $(this), $a = $li.children('a'); 

     if($li.is(':has(ul)')){ 
      var $group = $('<optgroup />', { 
       label: $a.text() 
      }).appendTo($select); 
      addGroup($group, $li.children('ul')); 
     } else { 
      add($select, $a) 
     } 
    }) 

    $("nav select").change(function() { 
     window.location = $(this).find("option:selected").val(); 
    }); 

    $('#navigasi_menu_reseponsive').remove(); 

}); 

Демо: Fiddle