CODEWITHSUNDEEP
javascriptjquery
AmateurCoder
AmateurCoder

Reputation: 4292

How can we modify "href" using jquery counter?

i have a web page containing some links .

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

desired output 

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

Can someone tell me how can we get the desired output.

Upvotes: 1

Views: 107

Answers (5)

uma
uma

Reputation: 2952

please try this.

$(".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);
  });
});

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

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

(You can see the updated href via js console)

Upvotes: 3

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

use

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

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

Upvotes: 1

Rakesh Juyal
Rakesh Juyal

Reputation: 36769

jQuery.each also passes the index to your callback method.

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

This will update all href with 

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

But this is not what you expected. You will have to use the selector which will give all href in first then in second. Try that.

Upvotes: 1

Albzi
Albzi

Reputation: 15609

Try this:

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

This basically creates a variable outside the each, then for every link, it goes up by 1 digit. When it gets to 3, it resets and goes back to 0.

Updated jQuery

Upvotes: 1

Related Questions