78

I'm trying to select all <div>s with the same ID in jQuery. How do i do it?

I tried this and it did not work

jQuery('#xx').each(function(ind,obj){
      //do stuff;
});
Matt
  • 74,352
  • 26
  • 153
  • 180
mark
  • 1,209
  • 4
  • 12
  • 17
  • 21
    IDs are meant to be unique. Use classes. – Antony Carthy Mar 26 '10 at 08:43
  • 26
    Everyone knows that, no one here answered his question though. – Sid Mar 29 '12 at 16:07
  • 4
    Not always can one have unique IDs, at least I can't afford that always. Well, @mydoghasworms has [answered][1] the question quite well, to the point. [1]: http://stackoverflow.com/questions/902839/jquery-select-divs-with-same-id#answer-6744674 – Fr0zenFyr May 09 '13 at 04:13

7 Answers7

415

Though there are other correct answers here (such as using classes), from an academic point of view it is of course possible to have multiple divs with the same ID, and it is possible to select them with jQuery.

When you use 

jQuery("#elemid")

it selects only the first element with the given ID.

However, when you select by attribute (e.g. id in your case), it returns all matching elements, like so:

jQuery("[id=elemid]")

This of course works for selection on any attribute, and you could further refine your selection by specifying the tag in question (e.g. div in your case)

jQuery("div[id=elemid]")
mydoghasworms
  • 18,233
  • 11
  • 61
  • 95
  • 136
    You were the only one to answer the question asked. – wcm Nov 16 '11 at 21:02
  • 7
    At least someone knows how to do real stuff in jQuery... Gosh! I was dying to know this, nothing else works. I simply can't take all others' approach of using class, i already have it there to do a different job. Hail @mydoghasworms!! – Fr0zenFyr May 09 '13 at 04:06
  • 3
    I was about to say: a lot of advices here but no answers. Instead luckily you answered properly and I think this should be the one to be accepted even if the approach suggested by @Ballsacian1 is good to avoid the problem. – gigaDIE May 23 '14 at 14:43
  • I thought you'd need quotes around the id value though? jQuery("div[id='elemid']") – jessieloo May 02 '17 at 14:06
36

I would use Different IDs but assign each DIV the same class.

<div id="c-1" class="countdown"></div>
<div id="c-2" class="countdown"></div>

This also has the added benefit of being able to reconstruct the IDs based off of the return of jQuery('.countdown').length

Ok what about adding multiple classes to each countdown timer. IE:

<div class="countdown c-1"></div>
<div class="countdown c-2"></div>
<div class="countdown c-1"></div>

That way you get the best of both worlds. It even allows repeat 'IDS'

Ballsacian1
  • 17,214
  • 2
  • 26
  • 25
  • Ballasacian: i have n counters with ids 1..n, so for each i have id=c-1,id=c-2 etc. but some of these repeat. so i cannot use your method. and they all have the same class='countdown' thanks – mark May 24 '09 at 01:27
  • Why would you want it to repeat? Especially on an ID which has to be unique. – Ballsacian1 May 24 '09 at 01:35
  • Ballasacian: thanks! that was brilliant! works like the way i want!! dont know why i did not think of that before! – mark May 24 '09 at 01:59
  • 2
    It's important to have a complete answer that assumes the preconditions rather than a workaround. Even if you think the preconditions are not optimal, they're often a given (like writing a Greasemonkey script for an existing website that uses id tags this way). – shiggity Feb 27 '14 at 01:43
  • This should not be the accepted answer. There are cases (for example a greasemonkey script) where one has no control over the html, and there are definitely sites that use the same id multiple times. – blues Oct 31 '16 at 20:39
  • It is not the answer, question was not about how to use HTML, but about how to select many elements with same IDs. – Le chat du rabbin Feb 12 '20 at 10:43
35

Your document should not contain two divs with the same id. This is invalid HTML, and as a result, the underlying DOM API does not support it.

From the HTML standard:

id = name [CS] This attribute assigns a name to an element. This name must be unique in a document.

You can either assign different ids to each div and select them both using $('#id1, #id2). Or assign the same class to both elements (.cls for example), and use $('.cls') to select them both.

Ayman Hourieh
  • 132,184
  • 23
  • 144
  • 116
  • 1
    It should also be noted that most of the underlying getElementById() functions jQuery and other libraries end up calling to do the actual search refuse to return anything but the first (or random?) element matching a given ID, and supporting it would mean manually walking the DOM. Just not worth it for invalid markup! – ironfroggy May 24 '09 at 02:02
  • 1
    Regarding this post: Interestingly enough, there is a javascript function getElementsByName(xxx) - notice the plural - implying that it is perfectly legal to have more than one element with the same name... – Jimbo Nov 26 '09 at 19:05
  • 2
    @Jimbo - True but my answer is about elements with the same `id`, not `name`. – Ayman Hourieh Nov 26 '09 at 22:44
  • 2
    @Jimbo — well, yes, radio groups depend on the feature. Not all elements can have names though. The question mentions divs, and they don't have a name attribute. – Quentin Mar 26 '10 at 08:28
4

Try this for selecting div by first id

$('div[id^="c-"]')
J. Steen
  • 15,470
  • 15
  • 56
  • 63
atabak
  • 193
  • 1
  • 4
4

$("div[id^=" + controlid + "]") will return all the controls with the same name but you need to ensure that the text should not present in any of the controls

Nunser
  • 4,512
  • 8
  • 25
  • 37
Niranjan Kumar
  • 71
  • 6
2

Can you assign a unique CSS class to each distinct timer? That way you could use the selector for the CSS class, which would work fine with multiple div elements.

Paul Morie
  • 15,528
  • 9
  • 52
  • 57
  • paul, no i cant use a unique class for each timer, because i use the class to select all timers, to initialize and style the countdown timer. – mark May 24 '09 at 01:28
  • 1
    **HTML** class. People use classes almost exclusively for matching CSS selectors doesn't make them part of a different language. – Quentin Mar 26 '10 at 08:28
  • While `class` is indeed part of HTML, it was added exclusively to support CSS (JS didn’t exist at the time, and `class` has zero effect in HTML). – bfontaine Jan 25 '23 at 16:26
0

You could also try wrapping the two div's in two div's with unique ids. Then select the div by $("#div1","#wraper1") and $("#div1","#wraper2")

Here you go:

<div id="wraper1">
<div id="div1">
</div>
<div id="wraper2">
<div id="div1">
</div>
Alfred
  • 21,058
  • 61
  • 167
  • 249
omer
  • 9
  • 1