Does duplicate id's screw up jquery selectors?

Question

If I had two divs, both with id="myDiv"

Would $("#myDiv").fadeOut(); fade both divs out? Or would it fade only the first/second? Or none at all?

How do I change which one it fades out?

Note: I know duplicate id's is against standards but I'm using the fancybox modal popup and it duplicates specified content on your page for the content of the popup. If anyone knows a way around this (maybe I'm using fancybox wrong) please let me know.

Answer 1

Element IDs are supposed to be unique. Having multiple DIVs of the same ID would be incorrect and unpredictable, and defies the purpose of the ID. If you did this:

$('.myDiv').fadeOut();

That would fade both of them out, assuming you give them a class of myDiv and unique IDs (or none at all).

Answer 2

"Note: I know duplicate id's is against standards"

Then don't do it. You have already figured out two problems. It violates standards, and it interferes with jQuery's (and indeed the regular DOM's) selection mechanism. There will probably be more issues in the future.

Quite possibly, you are using fancybox wrong, in which case I hope someone familiar with it helps you. Or worse, if the script itself is flawed, you shouldn't use it.

Answer 3

jQuery matches exactly one element when querying for an ID. An array of at most one Element object will be returned by $("#foo").get(). See the jQuery documentation for more information, or try it yourself.

$(function() {
    alert($("#foo").length);
});

Answer 4

Hi, I ran into the same problem. Apparently, when you create content on the page from which you wish to open a Fancybox, it creates a mirror div of the original content. In my instance, the controls were wrapped in a div that fancybox creates named, "fancy_div"

I was able to select the control and get it’s value by using the following format for the selector:

$('#fancy_div [id=InputText]').val();

your controls may exist elsewhere within the Fancybox. the best thing to do is look at the viewsource, but it's tricky.

To get to the view source, use the following technique: Place this tag on your form: Get value Open your form, click on the tag to open the alert window.
Make sure your cursor is within the page content (find a control and click).
Right click out of the control and select "view source".
A bunch of divs exist, so look for the div that contains your content.

Hope this helps.

Answer 5

Since $('#myDiv') will only return the first div with that ID, you'll have to find all elements with that ID using this trick:

$('[id=myDiv]');

So, for your case, to apply the fadeOut to all of those divs:

$('[id=myDiv]').fadeOut();

And if you want to make sure your page doesn't have this ID twice then you can remove the extra ones by doing this:

$('[id=myDiv]:gt(0)').remove();