Select all elements with same id

Question

I know that element id should be unique but which selector should be used when needed

$("*#x1"), $("[id=x1]"), or something else?

HTML

<div id="x1">A</div>
<div id="x1">B</div>
<div id="x2">C</div>

http://jsfiddle.net/2VHBC/2/

@Satpal you're right but I have to deal with such environment. — mpapec, Feb 11 '14 at 18:09
@RocketHazmat I know that both work, but I'm wondering which one should be preferred. — mpapec, Feb 11 '14 at 19:09
@mpapec: Neither. This should only be used in *emergencies*! You should switch to using classes. — gen_Eric, Feb 11 '14 at 19:10
@RocketHazmat tnx, now I'm aware of that (didn't know that it is such taboo among js developers). — mpapec, Feb 11 '14 at 19:12
@mpapec: It's not so much taboo as just simply incorrect. We prefer to do things the right way versus hacking things up the wrong way. — gen_Eric, Feb 11 '14 at 19:13
Instead of repeating that the HTML is invalid, perhaps understand that the question may apply to a legacy or other environment where the developer has no control over the HTML, but has to work with what they have. Answer the question, don't try to solve a problem the question is not asking about. — Steverino, Feb 08 '18 at 19:20

score 11 · Answer 1 · answered Feb 11 '14 at 18:14

11

Yes your html markup is invalid and Id must be unique on the page but attribute selector does your work in that case.

alert($('[id=x1]').length);

Js Fiddle Demo

answered Feb 11 '14 at 18:14

Sachin

40,216
7
90
102

score 9 · Accepted Answer · edited May 23 '17 at 12:29

As several other answers mentioned: do not duplicate IDs. It is a terrible, horrible, no good, very bad idea: Can multiple different HTML elements have the same ID if they're different elements?

I'm not sure what happens if you do this, but I'd wager it's up to the browser, which means you can't depend on it being reasonable.

Use class instead:

<div class="x1">A</div>
<div class="x1">B</div>
<div class="x2">C</div>

And then use jQuery's class selector, which matches the CSS syntax:

$('.x1')

score 3 · Answer 3 · answered Feb 11 '14 at 18:14

3

Since ID can be accessed as any attribute $('[id="x1"]') will do the trick.

Demo: http://jsfiddle.net/VkaWN/

But if possible at all influence design change, it's bad mojo.

answered Feb 11 '14 at 18:14

Yuriy Galanter

38,833
15
69
136

Subin · Answer 4 · 2014-02-11T18:19:57.113

2

This will work (Yes, it's a long shot).

$("[id]").each(function(){
 if($(this).attr("id")=="x1"){
  // do something
 }
});

ID's must be unique. If you use class instead of ID, it would have been easy to select them all. Also, since you can select multiple elements by attribute, you can use $('[id=x1]')

edited Feb 11 '14 at 18:19

answered Feb 11 '14 at 18:13

Subin

3,445
1
34
63

score 1 · Answer 5 · answered Feb 11 '14 at 18:14

1

You should use a class to identify the wrong id used in this case.

console.log($('body #x1'));

answered Feb 11 '14 at 18:14

John

544
4
19

score 0 · Answer 6 · answered Apr 11 '19 at 06:11

just add for each loop to specify all the elements having class .one and it will automatically turn the all elements having class .one to .blue color. Cheers! :)

   let clonedEle = $(".one").clone();

    clonedEle.insertAfter(".one");

    $(".one").click(function() {
      $(".one").each(function(){
        $(this).css("background-color", "blue");
       });
    });

score 0 · Answer 7 · answered Jul 06 '20 at 18:20

Always us different id. Simply add custom attribute on your div and the try doing like below:

<div data-id='x1' id='div1'></div>
<div data-id='x1' id='div2'></div>
<div data-id='x2' id='div3'></div>

var number = 6;
var myDiv = $('div[data-id='x1']');

Select all elements with same id

7 Answers7