Does jquery id duplicate?

Question

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

Will $("#myDiv").fadeOut(); fade both divs? Or will he only disappear first / second? Or not at all?

How can I change which one is disappearing?

Note. . I know that the duplicate id is standards compliant, but I use the fancybox modal popup and it duplicates the specified content on your page for the popup content. If someone knows the way around this (maybe I'm using fancybox incorrectly), please let me know.

Answer 1

jQuery matches only one element when requesting an identifier. An array of one Element will be returned $("#foo").get() . See the jQuery documentation for more information, or try it yourself.

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

Answer 2

Item identifiers must be unique. Having multiple DIVs of the same ID will be incorrect and unpredictable and does not match the purpose of the identifier. If you have done this:

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

This will cause both of them to disappear if you give them the myDiv class and unique identifiers (or nothing at all).

Answer 3

"Note: I know that duplicate id is compliant"

Then do not do it. You have already figured out two problems. It violates the standards, and this interferes with the jQuery (and really regular DOM) selection mechanism. There will probably be more problems in the future.

It is entirely possible that you are using fancybox incorrectly, in which case I hope someone familiar with it helps you. Or, even worse, if the script itself is erroneous, you should not use it.

Answer 4

Since $ ('# myDiv') returns only the first div with this identifier, you will need to find all elements with this identifier using this trick:

 $('[id=myDiv]'); 

So, for your case, apply fadeOut to all these divs:

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

And if you want your page to not have this identifier twice, you can remove the additional ones by doing the following:

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

Answer 5

You can also follow the path of using find (). find will return all elements with this ID, and you can limit the scope to a specific parent if necessary, try something like $(document).find('#myDiv').fadeOut();

or

 $('.parentElement').find('#myDiv').fadeOut(); 

Answer 6

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

I managed to select the control and get its value using the following format for the selector:

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

Your controls may exist elsewhere in Fancybox. It’s best to look at the viewource, but it’s difficult.

To go to the viewing source, use the following technique: Put this tag in your form: Get value Open the form, click on the tag to open a warning window.
Make sure the cursor is inside the page content (find the control and press).
Right-click the control and select View Source.
There are a bunch of divs, so find a div containing your content.

Hope this helps.

Answer 7

I recently had a similar problem. I had one page displaying various content through an Ajax load. There is a button that starts the server to create a PDF image.

My initial solution was to use a class selector that worked fine but caused friction with another developer. There were so many classes in the links that using the class as an identifier made the code ugly. Therefore, I used the name attribute:

 <a name="printButton".... $('a[name="printButton"]').on('click',function(){.... 

It worked just dandy!