javascript - 我们如何使用 jquery 计数器修改 "href"？

Question

我有一个包含一些链接的网页。

<div class="accordion-list">
    <ul class="accordion">
      <li class="accordion-item">
        <a href="#" class="accordion-link">Heading 1</a>
        <ul class="sub-list">
          <li><a href="xyz.com">Registrations</a></li>
          <li><a href="xyz.com" >Contacts</a></li>
          <li><a href="xyz.com" >Mortgages</a></li>
        </ul>
      </li>

       <li class="accordion-item">
        <a href="#" class="accordion-link">Heading 2</a>
        <ul class="sub-list">
          <li><a href="abc.com">Registrations</a></li>
          <li><a href="abc.com" >Contacts</a></li>
          <li><a href="abc.com" >Mortgages</a></li>
        </ul>
      </li>

  </ul>
</div>

期望的输出

   <div class="accordion-list">
    <ul class="accordion">
      <li class="accordion-item">
        <a href="#" class="accordion-link">Heading 1</a>
        <ul class="sub-list">
          <li><a href="xyz.com#item1">Registrations</a></li>
          <li><a href="xyz.com#item2" >Contacts</a></li>
          <li><a href="xyz.com#item3" >Mortgages</a></li>
          </ul>
      </li>

       <li class="accordion-item">
        <a href="#" class="accordion-link">Heading 2</a>
        <ul class="sub-list">
          <li><a href="abc.com#item1">Registrations</a></li>
          <li><a href="abc.com#item2" >Contacts</a></li>
          <li><a href="abc.com#item3" >Mortgages</a></li>
          </ul>
      </li>

  </ul>
</div>

我试过了

$(".sub-list a").each(function() {
   var _href = $(this).attr("href"); 
   $(this).attr("href", _href + ???);
});

谁能告诉我我们怎样才能得到想要的输出。

Answer 1

codepen 上的示例:http://codepen.io/anon/pen/zlkLt/

$(".sub-list").each(function() {
   var links = $(this).find('a');
   links.each(function(i) {
     var _href = $(this).attr('href');
     $(this).attr("href", _href + "#item" + (i + 1));
   });
});

(可以通过js控制台看到更新后的href)