How to make jQuery work with invalid HTML containing duplicate IDs?

Question

I have an old project that does contain HTML with duplicate IDs. Switching selectors from ids to classes needs a lot of work, Can I do it with the JQuery, specially that I know how many divs I'll hide.

<div id="d"></div>
<div id="d"></div>
<div id="d"></div>

I want to hide them all using a single action :

$('#d').hide();

but it hides the first div only.

Having several elements with identical IDs is invalid HTML: http://stackoverflow.com/questions/7262195/several-elements-with-the-same-id-responding-to-one-css-id-selector/7262229#7262229 — Joseph Silber, Oct 29 '12 at 03:13
you can't have multiple elements with the same id. Did you try it with classes? — Matt Whipple, Oct 29 '12 at 03:13
You should read the basics..difference between ID and class are the very basic of javascript — coolguy, Oct 29 '12 at 03:29
@ubercooluk he stated the project is old and as-is. He was looking for a way around it. If you downvoted for that, you should undo it. — Yatrix, Oct 29 '12 at 04:30

score 3 · Answer 1 · answered Oct 29 '12 at 03:13

3

ID should be unique. Try setting a the class, and then hiding based on that.

<div class="d"></div>
<div class="d"></div>
<div class="d"></div>

$('.d').hide();

answered Oct 29 '12 at 03:13

Brandon

983
6
15

Yatrix · Accepted Answer · 2012-10-29T03:26:00.177

2

You hid by id, which won't work as you have non-unique ids. Add a data-* attribute to them or a class as a flag.

<div data-someattributename="flag" id="d">

$('div[data-someattributename]').hide();

Due to your edit:

$.each($('div'), function() {
    If ($(this).attr('id')=="d") {
        $(this).hide();
    }
});

I'm not sure if the ids are wiped after the first one since they are duplicated, but if they're not, this should work.

edited Oct 29 '12 at 03:26

answered Oct 29 '12 at 03:13

Yatrix

13,361
16
48
78

@Fady you could probably pull all of the divs with $('div') and loop them and check their ids, do a string compare to "d" and then hide them. – Yatrix Oct 29 '12 at 03:22

score 1 · Answer 3 · answered Oct 29 '12 at 03:18

1

Use class instead of id attribute, since id has to be unique for each element:

    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>

Then:

   $(document).ready(function(){
            $(".d").hide();
   });

answered Oct 29 '12 at 03:18

janenz00

3,315
5
28
37

NullPoiиteя · Answer 4 · 2012-10-29T03:33:12.597

you can do this by the either by a parent class or div like

(".parent_class/id>div").hide();

or

by adding a class as Brandon told

Most important thing is that id Mus be unique

Each ID attribute must have a unique value over the document.

difference between id and class selector

The only real difference is when they should be used. An ID selector is generally reserved for something that appears once on a page. For example, if you have a page with a set of several topic headings, but there is one particular topic heading that you would like to stand out from the rest, then you would create an ID selector rule for that specific topic heading. The ID selector gives it a unique name and identity, so you can change that one topic heading without affecting the rest of the set.

if you will validate page with same id used more than once it will give you error

How to make jQuery work with invalid HTML containing duplicate IDs?

4 Answers4