JQuery: Set attribute for nth element by name selector

Question

Having a set of "a" tag with the same name:

<a name="link" href="http://link1">
<a name="link" href="http://link2">
<a name="link" href="http://link3">

I need to change the href attribute for the third element with $("['name=link']") selector, but is not working with prop/attr method.

Possible duplicate of [How to get nth jQuery element](http://stackoverflow.com/questions/1442925/how-to-get-nth-jquery-element) — mr., Sep 02 '16 at 14:01
in html5, the name attribute on an anchor is now obsolete and shouldn't be used. Why not use a class? — Pete, Sep 02 '16 at 14:05

RPichioli · Accepted Answer · 2016-09-02T14:15:13.440

I'm trying to understand your question.

By your explanation, I suggest you to try to use ":eq" jQuery Selector. The code'll be something like this:

// eq takes element by index (from 0 to *) in the same 'root' of nodes in DOM structure
$("a[name='link']:eq(2)").attr('href', '__new value__');

Here's the official jQuery documentation to this feature: https://api.jquery.com/eq-selector/

Working example:

$(document).ready(function() {
  $("a[name='link']:eq(2)").attr('href', '__new value__');

  // checking the href value in the console
  console.log($("a[name='link']:eq(2)").attr('href'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a name="link" href="http://link1">1st link</a>
<a name="link" href="http://link2">2nd link</a>
<a name="link" href="http://link3">3rd link</a>

JQuery: Set attribute for nth element by name selector

1 Answers1