Replace links with the same class with jQuery

Question

I'm looking for a way to replace 18 links using jQuery.

What I have is this:

    <a class="PDF-link" href="http://domain/0101_xxx.pdf" target="_blank">folder 1</a>
    <a class="PDF-link" href="http://domain/0102_xxx.pdf" target="_blank">folder 2</a>
    <a class="PDF-link" href="http://domain/0201_xxx.pdf" target="_blank">folder 2</a>
    <a class="PDF-link" href="http://domain/0202_xxx.pdf" target="_blank">folder 2</a>
    14 more like this

and I started with this jQuery:

    $(document).ready(function() {
         var client  =  "<%=UserController.GetCurrentUserInfo().Username%>";
         $('.PDF-link').prop('href', $('.PDF-link').prop('href').replace('xxx', client));
    });

But that generates the same URL for each link:

    http://domain/0101_johndoe.pdf
    http://domain/0101_johndoe.pdf
    http://domain/0101_johndoe.pdf
    http://domain/0101_johndoe.pdf

and I'd like it to be like this:

    http://domain/0101_johndoe.pdf
    http://domain/0102_johndoe.pdf
    http://domain/0201_johndoe.pdf
    http://domain/0202_johndoe.pdf

Can someone help me out?

Rory McCrossan · Accepted Answer · 2015-01-08 11:36:38Z

1

The logic you're using won't work because each time you select the entire group of .PDF-link elements as a whole. Instead you can provide a function to prop which will be executed for each individual element found:

var client = "<%= UserController.GetCurrentUserInfo().Username %>";
$('.PDF-link').prop('href', function(i, val) {
    return val.replace('xxx', client);
});

Example fiddle

answered Jan 8, 2015 at 11:36

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Everton Lenger · Accepted Answer · 2015-01-08 11:49:36Z

1

I'd use each in this case:

$(document).ready(function() {
    var client  =  "<%=UserController.GetCurrentUserInfo().Username%>";

    $('.PDF-link').each(function() {
        $(this).attr('href', $(this).attr('href').replace('xxx', client));
    });
});

answered Jan 8, 2015 at 11:49

Everton Lenger

1,4572 gold badges18 silver badges34 bronze badges

Comments

Nk SP · Accepted Answer · 2015-01-08 11:39:56Z

0

Use this.href in a each for instead of $('.PDF-link').prop('href')
Example JSFiddle

answered Jan 8, 2015 at 11:39

Nk SP

8565 gold badges19 silver badges37 bronze badges

Comments

2 revs · Accepted Answer · 2015-01-28 08:15:35Z

-1

try the below

$(document).ready(function() {
     var client  =  "<%=UserController.GetCurrentUserInfo().Username%>";
     $('a.PDF-link').prop('href',  client);
});

(or using attr)

$(document).ready(function() {
     var client  =  "<%=UserController.GetCurrentUserInfo().Username%>";
     $('a.PDF-link').attr('href',  client);
});

(or using javascript this should work)

$(document).ready(function() {
     var client  =  "<%=UserController.GetCurrentUserInfo().Username%>";
     $('a.PDF-link').each(function(){
        $(this)[0].setAttribute('href',  client);
     });
});

edited Jan 28, 2015 at 8:15

community wiki

2 revs
mateen

5 Comments

Everton Lenger Over a year ago

This will change all links for the client's name, and that's not what the OP wants.

Mateen Over a year ago

whos OP and the one who asked question didn't said anything like there are even other elements with the same class even if there is a simple change in the jQuery selector will do the job

Everton Lenger Over a year ago

Using your suggestion, all 18 links would have the same thing (what's in the var client). You should read the question more carefully.

Mateen Over a year ago

i suggest you read the question again because that's what the user want change, all the 18 links.And in the "var client" the value comes from the server

Everton Lenger Over a year ago

"But that generates the same URL for each link and I'd like it to be like this". Yes, he wanted to change all links, but not to the same thing.

Collectives™ on Stack Overflow

Replace links with the same class with jQuery

4 Answers 4

Comments

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related