Duplicate ID - Jquery

Question

I have a problem with duplicate ids in my html page.

Sometimes I need to get and id value from a class in Jquery, so:

<span class='click' id='23'>Click</span>

And in another class I have the same id:

<span class='classtow' id='23'>Click class two</span>

It works fine for Jquery, since it is a different function to get class id:

$(".click").click(function(){
var element = $(this);
var I = element.attr("id");
});
$(".classtwo").click(function(){
var element = $(this);
var I = element.attr("id");
});

But it doesn't pass on HTML validation. What would be the best practise to solve this?

I Know id must be unique, what I want to know is how could I solve this situation (knowing that I need to use the 23 value for both - it is an user ID that I need to get on click)

best practice would be to use an attribute like data-id="25". id attribute MUST be unique — Catalin MUNTEANU, Sep 20 '15 at 08:49
It's invalid to have the same IDs on a single page (hence UNIQUE). The only solution to get this through HTML validation is to remove the duplicate IDs. If you still need those values, use data-attributes as @CatalinMunteanu suggests. — Bram Vanroy, Sep 20 '15 at 08:56

score 0 · Answer 1 · answered Sep 20 '15 at 08:50

0

ids should always be unique. So that's the best solution. For the HTML validation issue, we need the validation code...

answered Sep 20 '15 at 08:50

R. Oosterholt

7,720
2
53
77

MoLow · Answer 2 · 2015-09-20T08:57:37.787

0

as written in MDN:

The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

an id must be unique. you should not use it twice

And this is not what you asked, but be aware of this notice:

Note: Using characters except ASCII letters and digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.

edited Sep 20 '15 at 08:57

answered Sep 20 '15 at 08:52

MoLow

3,056
2
21
41

1

realistically can use just about anything in an ID now https://mathiasbynens.be/notes/html5-id-class . this link is found in the jQuery API main selectors page – charlietfl Sep 20 '15 at 09:02

score 0 · Accepted Answer · edited May 23 '17 at 11:58

0

Many people have suggested it, but I'll try to make it more clear. In HTML5 we can use so-called data-attributes. You can also use these in older versions of HTML, though it won't pass a validator. (But it's still better than using duplicate IDs!) Basically, you can add your own key-value pair to any html element by specifying data-something=something to it.

Example:

<span class='click' data-userid='23'>Click</span>
<span class='classtwo' data-userid='23'>Click class two</span>

You can then fetch that value with jQuery like so:

$("span").click(function () {
    var element = $(this),
        userid = element.data("userid");
    alert(userid);
});

See it here.

edited May 23 '17 at 11:58

Community

1
1

answered Sep 20 '15 at 09:02

Bram Vanroy

27,032
24
137
239

I'd suggest `element.attr("data-userid");` as `.data()` method is far more complex than `attr()` – Artur Filipiak Sep 20 '15 at 09:03
@ᴀʀᴛᴜʀғɪʟɪᴘɪᴀᴋ Why's that? This is [perfectly valid](https://api.jquery.com/data/#data2): *Return the value at the named data store for the first element in the jQuery collection, as set by data(name, value) **or by an HTML5 data-* attribute**.* – Bram Vanroy Sep 20 '15 at 09:05
Have a look how the `data()` method works in jQuery. Don't use it just to access an attribute value. http://stackoverflow.com/questions/7261619/jquery-data-vs-attr – Artur Filipiak Sep 20 '15 at 09:07
@ᴀʀᴛᴜʀғɪʟɪᴘɪᴀᴋ The [top rated answer](http://stackoverflow.com/a/7262427/1150683) to that question says exactly what I do. If you want to fetch a value from a data-attribute in HTML, `.data()` is perfectly fine to use. *However* when **setting** a data-attribute in HTML you should be careful which function you use due to accessibility. – Bram Vanroy Sep 20 '15 at 09:10
@ᴀʀᴛᴜʀғɪʟɪᴘɪᴀᴋ Performance is something completely different. You said "Don't use it to access an attribute value". It's perfectly fine to use it! But you are correct in saying that it's slower. – Bram Vanroy Sep 20 '15 at 09:19
All I said is that `data()` is far more complex and shouldn't be used to just fetch attributes value. jQuery's **native** method for that is `attr()`. `data()` is made for something else, while it **can** be used for this too. – Artur Filipiak Sep 20 '15 at 09:20
1

@ᴀʀᴛᴜʀғɪʟɪᴘɪᴀᴋ we're dealing with a click handler here....not a recursive loop through the dom. That perf test just showed a 3% difference for me in FF 40. The question linked to above is years old now , prior to html5 and the dataset property. This `complex` argument doesn't stand up well to the way many modern frameworks ( ie bootstrap) are built using `data` heavily – charlietfl Sep 20 '15 at 09:21
what about older HTML versions? Should I worried about it? – RGS Sep 20 '15 at 09:22
@RickJoe no.... debate is about micro optimization and wouldn't have any impact on your use case – charlietfl Sep 20 '15 at 09:23
thank you friends! so I can use element.data("userid") or element.attr("data-userid"). – RGS Sep 20 '15 at 09:27
@RickJoe Either. You can choose. – Bram Vanroy Sep 20 '15 at 09:28

score -1 · Answer 4 · answered Sep 20 '15 at 08:51

-1

the id HAS TO BE unique... otherwise it won't be valid HTML... thats a HTML specification!

you could use othe data attributes like data-your-custom-id="25"

answered Sep 20 '15 at 08:51

FalcoB

1,333
10
25

Duplicate ID - Jquery

4 Answers4