jQuery hide all elements with the same id

Question

by topic I have some divs with id = "loader".

In my jQuery code I have

  $("#loader").hide(),

but it works only with the first div.

How could I hide all the divs?

Thanks a lot.

Html not allow multiple #ID on element on same page. You can use .class either. read this http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-types — Anirudha Gupta, Mar 18 '13 at 10:54
@GuptaAnirudha, multiple IDs are very well allowed on an HTML page, but no two elements on the same page can have the same ID. — Istiaque Ahmed, Mar 18 '13 at 10:59
@IstiaqueAhmed You can put elem1, elem2 but not elem on multiple elements. The code not broken sometime (CSS will work) but you can't validate it. — Anirudha Gupta, Mar 18 '13 at 11:04
@IstiaqueAhmed - obviously we're talking about multiple *identical* IDs. — ahren, Mar 18 '13 at 11:04
@GuptaAnirudha, is the code snippet I put in my comment to ahren invalid in html5 ? — Istiaque Ahmed, Mar 18 '13 at 11:05

score 34 · Accepted Answer · edited Aug 01 '18 at 16:13

34

Having more than one element with the same ID is not valid HTML. You can only have one element with the ID (#loader) in the whole page. That's why jQuery is hiding only the first element. Use the class instead of the id:

$('.loader').hide();

edited Aug 01 '18 at 16:13

Guillaume Georges

3,718
3
12
30

answered Mar 18 '13 at 10:56

Kasyx

3,100
20
30

1

'only one ID in whole page' - !! no two elements with the same id instead, right ? – Istiaque Ahmed Mar 18 '13 at 10:57

Adil · Answer 2 · 2016-02-26T07:29:06.477

25

The ids of html elements should be unique so you better use class with all element and use class selector to hide them all.

$('.className').hide();

If it is not possible for you to assign common class to them for instance you can not change the source code you can use Attribute Equals Selector [name=”value”].

 $("[id=loader]").hide();

edited Feb 26 '16 at 07:29

answered Mar 18 '13 at 10:54

Adil

143,427
25
201
198

score -3 · Answer 3 · answered Jun 03 '15 at 08:55

A way to hide all items of the same ID was as follows

$( "#hide" ).click(function() {
  $('div#hidden').hide();
});

<div id="hidden">ID Number 1</div>
<div id="2">ID Number 2</div>
<div id="hidden">ID Number 1</div>
<div id="2">ID Number 2</div>
<div id="hidden">ID Number 1</div>
<a href="#" id="hide">Hide Div</a>

Hope you can find this helpful.

jQuery hide all elements with the same id

3 Answers3

Linked

Related