jquery 查找每个子菜单项并为其添加计数

Question

我有一个菜单，我想在 link 前添加一个编号计数。

示例：

<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 我想要它去的地方..

我们的服务 - 01 商业法 - 02 债务追偿与破产

希望这是有道理的..我只设法让它在我想要的 link 之前添加文本，我不确定如何让它做另一个循环来创建之前的数字手。李父有多个，我只是抓取了一部分代码，以便您阅读。

Answer 1

使用计数器一定有帮助

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

Answer 2

为此，您可以检索父 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>

jquery 查找每个子菜单项并为其添加计数

jquery to find each child menu item and add a count to it

each

jquery