如何使用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

有關代碼筆的示例： 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）

Answer 2

嘗試這個：

var num = 0;
$(".sub-list a").each(function() {
   var _href = $(this).attr("href"); 
   $(this).attr("href", _href + "#item"+ ++num);
    if (num == 3){
        num = 0;
    }
});

JsFiddle

這基本上在each之外創建了一個變量，然后對於每個鏈接，它都會增加1位數字。 當達到3 ，它將重置並返回到0 。

更新的jQuery

Answer 3

jQuery.each還將索引傳遞給您的回調方法。

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

這將更新所有href

<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> 

 <li><a href="abc.com#item4">Registrations</a></li>
          <li><a href="abc.com#item5" >Contacts</a></li>
          <li><a href="abc.com#item6" >Mortgages</a></li>

但這不是您所期望的。 您將必須使用選擇器，該選擇器將首先提供所有href，然后再提供第二。 試試看

Answer 4

采用

$(".sub-list").find("a").each(function(){

$(this).attr("href",$(this).attr("href")+"item"+($(this).parent().index()+1));
});

Answer 5

請嘗試這個。

$(".sub-list").each(function(index, element){
  $(element).find('li a').each(function(i, element){
    var href_val = $(this).attr('href');
    $(this).attr('href', href_val+"#item"+i);
  });
});