Adding an id to a child with jQuery

Question

I have some plugin-generated html that I can't change, and need to add an id to an <a> tag so that I can change it's href link.

HTML

<div id="wpmem_login">
   <form action="www.staging.com/login" method="POST" class="form">
      <fieldset>
         <!--other html fields-->
         <div align="right" class="link-text">
            <a href="www.staging.com/password_reset"> click to reset password</a>
         </div>
         <div align="right" class="link-text">
            <a href="www.staging.com/register"> click to register</a>
      </fieldset>
   </form>
</div>

(this code is form generated so I had to type from looking at inspect element, so there are more html fields above these two where I commented and any typos there may be really aren't relevant)

I need to change the href link on the second to last field, password reset, without touching the last link that has identical classes. I know I can do this with $("#reset").attr("href", "http://www.staging.com/pwd_reset") once I have an id or selector #reset on that div, but I'm not sure how to get that selector.

I need help adding an id or getting the .attr function to the right link.

What have you tried? would suggest using `$(element-selector).prop('id');` — Twisty, Dec 31 '15 at 20:13
Whatever selector you use to find the link to add the ID to it, you can use the same selector to change its href in the first place. You don't need an ID. — Barmar, Dec 31 '15 at 20:19

score 4 · Accepted Answer · edited May 23 '17 at 11:52

4

$('a[href$="password_reset"]')

In otherwords find the anchor tag which ends with correct url. Jquery allows some pattern matching capability so can hard code as little of url as possible.

Here is an SO that has details on the pattern matching capability in jquery

Select <a> which href ends with some string

edited May 23 '17 at 11:52

Community

1
1

answered Dec 31 '15 at 20:16

Mitch VanDuyn

2,838
1
22
29

gaetanoM · Answer 2 · 2015-12-31T21:52:41.760

1

You can select your anchor using the href attribute:

   $('a[href="www.staging.com/password_reset"]').attr("href", "http://www.staging.com/pwd_reset")

After changing the href, to reselect the same element you need to change your jQuery selector to:

$('a[href="http://www.staging.com/pwd_reset"]')

edited Dec 31 '15 at 21:52

answered Dec 31 '15 at 20:18

gaetanoM

41,594
6
42
61

@Barmar can do the same thing with any: `$("a[href='www.staging.com/password_reset']).prop('id', 'reset');` – Twisty Dec 31 '15 at 20:23
I know. I just meant your method is correct, but the example is wrong for the question he asked. – Barmar Dec 31 '15 at 20:24
What are you talking about? Nothing generates IDs automatically. – Barmar Dec 31 '15 at 21:47
@Barmar Sorry, I'm tired. you are rigth – gaetanoM Dec 31 '15 at 21:51

score 0 · Answer 3 · edited May 23 '17 at 12:04

0

Just use the solution in this post https://stackoverflow.com/a/303961/3866019 to select the right link. For you this would be something like:

$('a[href*="password_reset"]')

where *= means 'contains' and then use .attr('id', 'reset') to set it's id.

jQuery Documentation: http://api.jquery.com/attribute-contains-selector/

edited May 23 '17 at 12:04

Community

1
1

answered Dec 31 '15 at 20:19

asmithdev

326
2
12

score 0 · Answer 4 · answered Jan 01 '16 at 04:31

0

You can use jQuery's $ endsWith Selector to get your link and then change href

$('a[href$="password_reset"]').attr("href", "http://www.staging.com/pwd_reset");

answered Jan 01 '16 at 04:31

Hemal

3,682
1
23
54

Adding an id to a child with jQuery

HTML

4 Answers4