Change the href for a hyperlink by using its value jQuery

Question

As I got the idea If I want change the anchor tag href by matching an anchor with a specific existing href, I wrote below code that is working:

<a href="Accept.php">Accept</a>
<script src="http://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$("a[href='Accept.php']").attr('href', 'http://www.accept.com');
</script>

But Now I was working on to change the hyperlink by using the anchor tag value using jQuery.

I wrote below code for that but it's not working for me.

$("a[text='Accept']").attr('href', 'http://www.accept.com');

There is no text attribute on the anchor tag. So you cannot do `$("a[text='Accept']")` — rishipuri, May 09 '17 at 08:47
If your `a` elements don't have a `text` attribute (and they shouldn't, it's invalid HTML), `a[text='...']` isn't going to work. — T.J. Crowder, May 09 '17 at 08:48
It would help a **lot** to know what the HTML looks like for your desired version. — T.J. Crowder, May 09 '17 at 08:51

score 1 · Accepted Answer · answered May 09 '17 at 08:49

1

$("a").filter(function(){

return $(this).text() == 'Accept';
}).attr('href', 'http://www.accept.com');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="Accept.php">Accept</a>

use filter and return the anchor you want to select.
then use attr() to set the attr value

answered May 09 '17 at 08:49

guradio

15,524
4
36
57

Bro, Thank you So Much. Among Of All the Answers. Your ans was perfect. – Doe Chalie May 09 '17 at 09:07
@DoeChalie glad to help mate happy coding – guradio May 09 '17 at 09:09
can you also tell me how i can do it in php ? let suppose i have a variable that contain some code of html page , and i want to filter from it. – Doe Chalie May 09 '17 at 09:13

Ahmed Ginani · Answer 2 · 2017-05-09T09:03:28.000

0

Please check this. It is working.

$(document).ready(function(){
   $("a:contains('Accept')").attr('href', 'http://www.accept.com');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<a href="Accept.php">Accept</a>

edited May 09 '17 at 09:03

answered May 09 '17 at 08:48

Ahmed Ginani

6,522
2
15
33

1

setting new text to an anchor and putting attribute value is different from selecting an anchor with a specific text – guradio May 09 '17 at 08:51
@guradio, yes you are right. But he wants to change anchor tag using the value that's why I prefer to do this in a simple way. – Ahmed Ginani May 09 '17 at 08:56
Bro, Just do little bit changes Please. – Doe Chalie May 09 '17 at 08:59
It is changing all the anchor tag to accept and with same href. – Doe Chalie May 09 '17 at 08:59
i just want to change the href who has value just accept nothing else. – Doe Chalie May 09 '17 at 09:00
yeah @DoeChalie. Thanks. It was my mistake. I changed it. – Ahmed Ginani May 09 '17 at 09:04
still you did not change it – Doe Chalie May 09 '17 at 09:05

score 0 · Answer 3 · answered May 09 '17 at 08:50

If your a elements don't have a text attribute (and they shouldn't, it's invalid HTML), a[text='...'] isn't going to work.

If you're trying to set their href to their contents, you could use :contains, but note that it matches anywhere in the element:

$("a:contains('Accept')").attr("href", function() {
    return $(this).text();
});

Note that that uses the version of attr accepting a callback, so it uses the specific text of each a as the attribute.

Your content would need to be a valid relative or absolute URL, e.g. <a>Accept.php</a>. or similar.

score 0 · Answer 4 · answered May 09 '17 at 08:51

0

you can use contains selector to get link object. refer https://api.jquery.com/contains-selector/

$("a:contains('Accept')).attr('href', 'http://www.accept.com');

answered May 09 '17 at 08:51

yogesh keraliya

156
5

score -1 · Answer 5 · answered May 09 '17 at 08:58

As far as I know, jQuery does not allow to select elements by the contents of their inner text. You will need to either filter the results or use a different approach altogether.

First, let's see the filtering option. You will need to select all anchor tags and filter them by their contents afterwards using the filter() function:

$("a")
    .filter(function(idx, el) {
        return $(el).text() === "Accept";
    })
    .attr("href", "http://www.accept.com");

Same example on jsfiddle.

However, this is obviously a rather slow option and on very large pages, it might turn out to be causing a perceivable lag. Make sure it doesn't cause trouble for you before pushing this to production.

An alternative approach, and the recommended one, would be to use a class or id. As you know, jQuery, as well as vanilla JS, is able to select elements by their id or class. I would suggest trying to figure out if you can apply an id/class to your link and select that instead. Use the filtering approach as a last resort solution.

score -2 · Answer 6 · answered May 09 '17 at 08:50

-2

Here is sample demo code for you:

HTML:

<a href="Accept.php">Accept</a>

JQuery:

if($("a").text() == 'Accept') {
    $("a").attr('href', 'http://www.accept.com');
}

answered May 09 '17 at 08:50

Milan Chheda

8,159
3
20
35

And if there's more than one `a` element? – T.J. Crowder May 09 '17 at 08:52
Well, in that case, we can change the code. Assign class and custom attribute to each tag and based on that, we can tweak the JQuery code. Current solution is given based on the mentioned code in the question. – Milan Chheda May 09 '17 at 08:55

Change the href for a hyperlink by using its value jQuery

6 Answers6