Is it normal to have two elements with same id in

问题:

i know, that two elements can't hav the same id. But it's happens so, that in my project i have two elements with same id in other divs, like this

<div id="div1">
     <img id="loading" />
</div>
<div id="div2">
     <img id="loading" />
</div>

and css:

#div1 #loading
{
    some style here...
}
#div2 #loading
{
    another style here...
}

works fine for me, but maybe it is not reccomended to do by so?

Thanks

UPDATE

Yes, i know, thet i can use classes, and it's strongly recomended to do by so, but i want to know is there any potential risk in this usage of id? i think no, becouse when i wrote for example

$("#div1 #loading")... it becomes a unique element. isn't it?

Final Update

Use suggested principe, if you have reasons to do that! ;)

回答1:

Change your id to class. It is not a good idea to give duplicate id.

Think two students having same roll no in a class. Imagine them getting examination result. How will the school be able to recognise the marksheet?

Your way is not cross browser compatible, and will affect a lot while coding JavaScript, and posted form etc

You can get the same effect using class

see

<div id="div1">
     <img class="loading" />
</div>
<div id="div2">
     <img class="loading" />
</div>

and css:

#div1 .loading
{
    some style here...
}
#div2 .loading
{
    another style here...
}

回答2:

an id must (should) be unique!!

you will have troubles selecting it via JS in most browsers - better use class

回答3:

The big reason is for JavaScript DOM manipulation. In your case, if you do something like this...

document.getElementById("loading")

... JavaScript will return the first element, and the first element only. You'll have no way to access the rest of them without some serious DOM walking.

回答4:

Just because no-one else has posted it - the HTML spec, section on ID, which says:

id = name [CS]

This attribute assigns a name to an element. This name must be unique in a document.

回答5:

Yes you are right, it is not recommened to do so. An ID should always be unique (e.g. if you want to select the element with javascript). If you just want to add the same style to the divs, just use css class.

回答6:

Unique:

In mathematics and logic, the phrase "there is one and only one" is used to indicate that exactly one object with a certain property exists.

#div1 #loading does not remedy the fact that you have two instances of #loading in your document. So, no, don't do that.

回答7:

IDs should be unique, so id1 and id2 are fine, but for many elements with the same style, use an HTML class and CSS class selector:

.loading
{
styles here
}

These are allowed to be repeated as many times as you want on a page :)

回答8:

Is it normal? No.

Is it recommended? Definitely not! It's actually prohibited (but enforcement is weak).

But it (apparently) works, so ...

回答9:

Id are used to distinguish elements, they must be unique for different reason, one of them is the use of javascript, function like getElementById won't work well if you have duplicate ID, you won't be able to predict what it'll do on different browser as JS is self-implemented on each browser differently.

If you wish to use a structure like #div loading and #div2 loading it seem clear that both loading have similar uses so they should be classes and would be used like this

#div1.loading and #div2.loading

Also one plus of using this syntax would be to put the common style in .loading like this

.loading{ style common to both the loading }

#div1.loading{ style used only by the loading in div1 }

#div2.loading{ style used only by the loading in div2 }

回答10:

https://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#adef-id

BUT!

If you need it in your project, you can use it, like suggested in my Question Final Update!

回答11:

validation and purist-ism aside, it is perfectly functional. But I would definitely be annoyed if I use that #loading id and find that a jquery effect or a css effect applies to more than 1 element.Do tell me if IE6 or 7 or Firefox 1.x or 2.x ruins that code.

回答12:

It's bad practice of using I'd on element. Because I'd giving something for understanding unique with their name identification. And second thing we use its in CSS but in JavaScript this bad practice. So good example for this class and student.

So don't do this.

回答13:

I disagree on people saying to always use a "unique", meaning different ID everytime you label one. Sometimes its acceptable, such as my case where I am making a calculator.

The javascript is doing the math and outputting the result into the div with the id="total". I need that same exact "total" to be in 2 different places however. In this case, why wouldn't I use two different div's with the same ID? I need the same number in both boxes. With jQuery, I perform and output the math once and it populates both div's at the same time, which is what I want.

So long as you understand the risks where if you were PULLING information from those 2 div's with the same ID, then I say feel free. As long as you dont confuse yourself and need 2 different results in the same div ID.