How to use common js function for two divs containig elements of identical ids?

Question

I have common jQuery function and two div tags. Both div tags have different names but both containing elements of identical ids now i want to use this common Jquery function for them both? I have implemented common function but it's not working for both.

Here's link to my jsfiddle -jsfiddle.net/xS7zF/1/

In my jsfiddle there are two div tags namely example1 and example2 and both tags have elements of identical ids. Function is working fine for first div but not for second.

please help me to sort out this.

Answer 1

ID's must be unique, you should not repeat them. You could replace id with class and in the jQuery function do (".ub").each() or manually referencing the object using eq(x) . eg (".ub").eq(1).

Answer 2

Yeah, under the hood, jQuery selection on an ID will use the Document.GetElementById() function implemented by the browser, which is really fast, but (i guess depending on the browser) will stop after it finds the first element, since ID's should be unique and no further searching is needed after the first one is found.

For instance, rename the divs with id="eb" to class="eb" and you can still target specific elements using $("#example1 .eb") and $("#example2 .eb")

UPDATE: Using your new Fiddle I created this: http://jsfiddle.net/xS7zF/5/

I cleaned up a lot of code and hopefully you can see what I have done. I changed all elements that appear twice from id to class. Now, when you attach an event to an element using $(".classname").click() , it attaches to all the elements. In the handler function where you set HTML and do your show() / hide() , you don't target a specific element using it's ID, but you find it relative to the element that does the event. You can do this using parent(), parentsUntil(), next(), find(), etc. Check jQuery docs for all possibilities. So for instance, the change-handler attaches to all inputs with name=Assets. But instead of doing $("#b1").show(), I go to the parent of the specific input that fires using $(this).parent(). Then I find the element with a class=".b1", which it will only find the one that is next to this specific input and I set the HTML to just that element.

Since there is another input, the same actions happen when THAT input changes, but instead it finds IT's parent, and finds the element with class=".b1" that is next to IT. So both divs with input are contained since they act on elements relative to itself and not across the document.

For extra fun and to show you how flexible this way of programming is, here is a fiddle with the Javascript-code unchanged, but with the exact same question-div copied 8 times. No matter how many times you repeat this, the same code will act on as many divs as you create since everything works relative. http://jsfiddle.net/xS7zF/7/

Hopefully this helps, the rest is up to you!

Answer 3

You shouldn't assign same id's to different elements. You CAN but you SHOULDN'T . Instead of giving the same id, use class

Answer 4

IDs must be unique, try fix this, change to classes. You can try something like this:

$("div div:first-child")

instead of

$("#eb")

But depends of the rest of your page code. So, change to classes first and use

$(".eb")

Answer 5

当jQuery / javascript找到第一个ID时会忽略其余的ID，请阅读更多相关内容http://www.w3schools.com/tags/att_global_id.asp