Welcome to WebmasterWorld Guest from 54.221.87.97

Forum Moderators: open

Message Too Old, No Replies

Multiple elements on a page with the same ID

     

iamvela

2:07 am on Jun 16, 2009 (gmt 0)

5+ Year Member



Hi, I have a widget that users can put on their own web-page. If the widget gets included multiple times, by a user, on his/her page then we will end up with a scenario with multiple widget-elements on the same page with the same id.

We have to be able to do some things with each of these widgets. Is there away that we can do a document.getElementbyId() and get an array of all matching elements?

For what we are doing we are running into a problem with Firefox.

Any pointers would be much appreciated. Thanks.

g1smd

2:38 am on Jun 16, 2009 (gmt 0)

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



An ID *must* be unique per page. That's in the HTML specs.

Gibble

3:20 am on Jun 16, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member




An ID *must* be unique per page. That's in the HTML specs.

Most browsers don't break if it isn't though, but I agree, it definitely should be.

You could use class names instead to give items names. Personally, I would use jQuery so you can use CSS selectors to find elements.

Fotiman

1:33 pm on Jun 16, 2009 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Most browsers don't break if it isn't though, but I agree, it definitely should be.

Well, I guess that depends on your definition of "breaks". If you want to access one of those items via it's ID using document.getElementById, you won't be able to.
As Gibble wrote, you should use class names instead of IDs. I think all of the JavaScript libraries have methods to get elements by class name.

The jQuery way:


// Get all elements with class 'myclass'
var nodes = $('.myclass');

The YUI 2.7.0 Selector way:


// Get all elements with class 'myclass'
var nodes = YAHOO.util.Selector.query('.myclass');

The YUI 2.7.0 getElementsByClass way:


// Get all elements with class 'myclass'
var nodes = YAHOO.util.Dom.getElementsByClassName('myclass');

Just a few examples.

iamvela

8:53 am on Jun 17, 2009 (gmt 0)

5+ Year Member



Thanks for the suggestions to use jQuery but because the footprint needs to be reaaaly tiny we cannot use jQuery.

So lets say I want to make each widget "hidden" Is there a way I can do that? BTW this works in IE, but FF just hides the first one.

Fotiman

1:50 pm on Jun 17, 2009 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



You could write your own "getElementsByClass" function. Or use the Yahoo minified files (yahoo-min.js and dom-min.js are only about 3k and 6k respectively).

Gibble

2:00 pm on Jun 17, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



jQuery actually has a really small footprint, and is very fast.

The minified file is only 19k.

And it's selectors run fast as well. Or you can use this tool to compare the speeds in your browser of different libs (search google for slickspeed).