jquery pour trouver chaque élément de menu enfant et y ajouter un compte

Question

J'ai un menu que je veux ajouter au comptage numéroté.

Exemple:

<ul> 
    <li><a href="/"><span>Home</span></a></li> 
    <li class="parent" transform="100"><a href="/" class="js-open-child-menu"><span>Our Services</span> <span class="angle">/</span> <i class="fa fa-angle-right"></i></a> 
    <div class="child-menu"> 
     <ul> 
     <li class="parent" transform="200"> 
      <a href="/" class="js-open-child-menu">01 <span>Business &amp; Commercial Law</span> <span class="angle">/</span> <i class="fa fa-angle-right"></i></a> 
      <div class="child-menu"> 
      <ul> 
       <li class="a-link-146"><a href="/"><span>Banking &amp; Finance</span></a></li> 
       <li class="a-link-147"><a href="/"><span>Buying or Selling a Business</span></a></li> 
       <li class="a-link-148"><a href="/"><span>Commercial Contracts &amp; Agreements</span></a></li> 
       <li class="a-link-149"><a href="/"><span>Liquor Licensing</span></a></li> 
      </ul> 
      </div> 
     </li> 
     <li class="parent" transform="200"> 
      <a href="/" class="js-open-child-menu">02 <span>Debt Recovery &amp; Insolvency</span> <span class="angle">/</span> <i class="fa fa-angle-right"></i></a> 
      <div class="child-menu"> 
      <ul class="m-main-menu-child"> 
       <li class="a-link-150"><a href="/"><span>Debt Recovery</span></a></li> 
       <li class="a-link-151"><a href="/"><span>Insolvency</span></a></li> 
      </ul> 
      </div> 
     </li> 
     </ul> 
    </div> 
    </li> 
    <li class="a-link-129"><a href="/"><span>Careers</span></a></li> 
    <li class="a-link-130"><a href="/"><span>Contact</span></a></li> 
</ul> 

$('.menu-content ul li.parent').each(function(){ // find each parent item 
    $(this).find('.child-menu ul li a').prepend('*count*'); // for each child prepend the count 
}); 

J'ai ajouté manuellement dans 01 et 02 dans le code ci-dessus où je veux qu'il aille ..

Nos services - Business & Commercial Law - Recouvrement de créances & Insolvabilité

Espérons que thi s a du sens .. J'ai seulement réussi à le faire précéder de texte avant les liens que je veux, je ne suis pas sûr de savoir comment le faire faire une autre boucle pour créer les nombres avant la main. Il y a plusieurs parents li, je viens d'attraper une partie de mon code pour que vous puissiez le lire plus facilement.

Answer 1

Pour ce faire, vous pouvez récupérer le index() du parent li et préfixer que l'enfant élément a. Pour le formater comme vous avez besoin, il suffit de manipuler légèrement les chaînes pour ajouter 0. Essayez ceci:

$('.menu-content > ul > li.parent > .child-menu > ul > li > a').prepend(function(i) { 
 
    var idx = $(this).closest('li').index(); 
 
    return ('00' + (idx + 1)).slice(-2) + ' '; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="menu-content"> 
 
    <ul> 
 
    <li><a href="/"><span>Home</span></a></li> 
 
    <li class="parent" transform="100"> 
 
     <a href="/" class="js-open-child-menu"> 
 
     <span>Our Services</span> 
 
     <span class="angle">/</span> 
 
     <i class="fa fa-angle-right"></i> 
 
     </a> 
 
     <div class="child-menu"> 
 
     <ul> 
 
      <li class="parent" transform="200"> 
 
      <a href="/" class="js-open-child-menu"> 
 
       <span>Business &amp; Commercial Law</span> 
 
       <span class="angle">/</span> 
 
       <i class="fa fa-angle-right"></i> 
 
      </a> 
 
      <div class="child-menu"> 
 
       <ul> 
 
       <li class="a-link-146"><a href="/"><span>Banking &amp; Finance</span></a></li> 
 
       <li class="a-link-147"><a href="/"><span>Buying or Selling a Business</span></a></li> 
 
       <li class="a-link-148"><a href="/"><span>Commercial Contracts &amp; Agreements</span></a></li> 
 
       <li class="a-link-149"><a href="/"><span>Liquor Licensing</span></a></li> 
 
       </ul> 
 
      </div> 
 
      </li> 
 
      <li class="parent" transform="200"> 
 
      <a href="/" class="js-open-child-menu"> 
 
       <span>Debt Recovery &amp; Insolvency</span> 
 
       <span class="angle">/</span> 
 
       <i class="fa fa-angle-right"></i> 
 
      </a> 
 
      <div class="child-menu"> 
 
       <ul class="m-main-menu-child"> 
 
       <li class="a-link-150"><a href="/"><span>Debt Recovery</span></a></li> 
 
       <li class="a-link-151"><a href="/"><span>Insolvency</span></a></li> 
 
       </ul> 
 
      </div> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    <li class="a-link-129"><a href="/"><span>Careers</span></a></li> 
 
    <li class="a-link-130"><a href="/"><span>Contact</span></a></li> 
 
    <li class="parent" transform="100"> 
 
     <a href="/" class="js-open-child-menu"> 
 
     <span>Our Services</span> 
 
     <span class="angle">/</span> 
 
     <i class="fa fa-angle-right"></i> 
 
     </a> 
 
     <div class="child-menu"> 
 
     <ul> 
 
      <li class="parent" transform="200"> 
 
      <a href="/" class="js-open-child-menu"> 
 
       <span>Business &amp; Commercial Law</span> 
 
       <span class="angle">/</span> 
 
       <i class="fa fa-angle-right"></i> 
 
      </a> 
 
      <div class="child-menu"> 
 
       <ul> 
 
       <li class="a-link-146"><a href="/"><span>Banking &amp; Finance</span></a></li> 
 
       <li class="a-link-147"><a href="/"><span>Buying or Selling a Business</span></a></li> 
 
       <li class="a-link-148"><a href="/"><span>Commercial Contracts &amp; Agreements</span></a></li> 
 
       <li class="a-link-149"><a href="/"><span>Liquor Licensing</span></a></li> 
 
       </ul> 
 
      </div> 
 
      </li> 
 
      <li class="parent" transform="200"> 
 
      <a href="/" class="js-open-child-menu"> 
 
       <span>Debt Recovery &amp; Insolvency</span> 
 
       <span class="angle">/</span> 
 
       <i class="fa fa-angle-right"></i> 
 
      </a> 
 
      <div class="child-menu"> 
 
       <ul class="m-main-menu-child"> 
 
       <li class="a-link-150"><a href="/"><span>Debt Recovery</span></a></li> 
 
       <li class="a-link-151"><a href="/"><span>Insolvency</span></a></li> 
 
       </ul> 
 
      </div> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

l'aide d'un compteur doit utile

var counter =0; 

$('.menu-content ul li.parent').each(function(){ // find each parent item 
    counter++; 
    $(this).find('.child-menu ul li a').prepend(counter < 10 ? '0'+counter : counter); // for each child prepend the count 
});