jquery查找每個子菜單項併爲其添加一個計數

Question

我有一個菜單，我想在鏈接上加一個數字計數。

例子：

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

我在01和02手動添加在上面的代碼，我希望它去..

我們的服務 - 業務&商法 - 債務追討&破產

希望通過這是有道理的..我只是設法讓它在我想要的鏈接之前預先添加文本，我不知道如何讓它做另一個循環來事先創建數字。有多個家長李，我只是抓住了我的代碼的一部分，所以你可以更容易閱讀。

Answer 1

要做到這一點，你可以檢索父li的index()和前置一個孩子a元素。按照您的需要進行格式化，只需稍加一些字符串操作即可添加前導碼0。試試這個：

$('.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

使用計數器必須有用

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