Modification JQuery d'une liste non ordonnée imbriquée

Question

Voici ce que j'essaie de réaliser.

J'ai utilisé JQuery pour ajouter > éléments à côté de chaque <li> avec un <ul> imbriqué permettant une indication qu'il a un menu imbriqué.

Je suis en train de prendre le href attribué la de la <li> avec un imbriquée <ul> et créer (comme le premier élément dans le menu imbriqué) un élément de menu Overview.

Par exemple:

• Phones 
    - Overview 
    - Phone Types 
    - Phone FAQs 

Le menu est créé avec le lien Vue d'ensemble sur le parent Phones, et le lien Overview doit être créé dynamiquement.

Voici ce que j'ai actuellement:

$('li.menu-item').each(function(index){ 
     if($(this).children('ul').length>0){ 
      var theHref = $(this).children('a').attr('href'); 
      var ulContent = $(this).children('ul').html(); 
      $(this).children('a').attr('href', '#'); 
      $(this).children('ul').html('<li><a href="'+theHref+'">Overview</a></li>'+ulContent); 
      $(this).append('<div class="menu-ticker"><a class="ticker">></a></div>'); 
     } 
    }); 

menu-ticker fait référence à l'élément >.

Mon erreur est que (en utilisant l'exemple ci-dessus) Phone Types a un menu imbriqué aussi. Cependant, une fois que j'ai ajouté le lien Overview, le > n'apparaît pas dans les sous-sous-menus. Sans le code Overview, cela fonctionne très bien.

Quelqu'un peut-il aider?

MISE À JOUR:
Comme demandé, voici un jsFiddle - http://jsfiddle.net/wGKQh/

Answer 1

D'accord, la solution me regarder en face, parce que je l'avais arraché le html, dans une variable puis rajoutées il avec un ajout, les sélecteurs n'avaient pas ciblé ce que j'avais modifié.

Au lieu de cela, j'ai utilisé le préfixe.

$('li.menu-item').each(function(index){ 
     if($(this).children('ul').length>0){ 
      var theHref = $(this).children('a').attr('href'); 
      $(this).children('a').attr('href', '#'); 
      $(this).children('ul').prepend('<li><a href="'+theHref+'">Overview</a></li>'); 
      $(this).append('<div class="menu-ticker"><a class="ticker">></a></div>'); 
     } 
    });