我们如何修改“three "使用jquery计数器

How can we modify "href" using jquery counter?

本文关键字：quot 使用 计数器 jquery three 何修改 修改 我们      更新时间：2023-09-26

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

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

i tried 

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

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

示例: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)

试试这个:

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

jQuery。每个还将索引传递给回调方法。

$(".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在第一，然后在第二。试试。

use

$(".sub-list").find("a").each(function(){
$(this).attr("href",$(this).attr("href")+"item"+($(this).parent().index()+1));
});

请尝试一下。

$(".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);
  });
});
相关文章：