Get an anchor text value among multiple anchor's with same href

Question

My html is

<a id='_requestOne' href='#applynow'> apply one </a>

<a id='_requestTwo' href='#applynow'> apply two </a>

<a href='#applynow'> apply three </a>

I want to change the anchor text for the second one alone. so I implemented in script as

$("a[href='#applynow']").text("request call");

Its changing all the three tags, so I tried as

$("#_requestTwo a[href='#applynow']").text("request call");

But its not working. Can anyone give me a solution that how could I declare both id & href in same call.

Thanks in advance.

Answer 1

What you can do is target the second Item of the jQuery Object:

$( $("a[href='#applynow']")[1] ).text('request call') //starts counting at 0

I do not advise on this, it makes the code less maintenable if the html markup changes. You have an ID, so use that instead.

$("#_requestTwo").text('request call')

PS:

The reason why your second try doesn't work is because you had an error in the selector:

$("#_requestTwo a[href='#applynow']") 
//should be 
$("a[href='#applynow']#_requestTwo") 

Answer 2

First select anchors with href then specify with ID or select directly by ID because ID should be unique:

 $("a[href='#applynow']#_requestTwo").text("request call");

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a id='_requestOne' href='#applynow'> apply one </a> <a id='_requestTwo' href='#applynow'> apply two </a> <a href='#applynow'> apply three </a>

---

Always select elements from low to high specificity like:

$("tagname.class");