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）

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。

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

我们如何修改＆＃34; href＆＃34;使用jquery计数器？

5 个答案: