[jQuery] Re: A general Javascript question: duplicate IDs in a document?
It's against the W3c spec for the DOM. The whole point of an ID is that it's unique on the page. Duplicate IDs lead to potential errors. If you need to have more than one of a thing on a page, then use a class. -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of riotbrrd Sent: Tuesday, March 31, 2009 11:24 AM To: jQuery (English) Subject: [jQuery] A general Javascript question: duplicate IDs in a document? I realize this is not jQuery specific, but I figured you guys might have some good advice... I often find myself wanting to assign the same ID to multiple elements in a document -- typically when there are several versions of an element which display at different times. Is there a good reason NOT to do this? If so, what's a better practice? thanks, Kim
[jQuery] Re: A general Javascript question: duplicate IDs in a document?
An ID should be unique. That's why it's callled an ID (IDentifier). Repeating an ID in a page will cause problems for any DOM work. For your purposes, you might do something like: div class=Foo id=foo_1/div div class=Bar id=bar_1/div div class=Foo id=foo_2/div div class=Bar id=bar_2/div On Tue, Mar 31, 2009 at 12:24 PM, riotbrrd k...@riotbrrd.com wrote: I realize this is not jQuery specific, but I figured you guys might have some good advice... I often find myself wanting to assign the same ID to multiple elements in a document -- typically when there are several versions of an element which display at different times. Is there a good reason NOT to do this? If so, what's a better practice? thanks, Kim
[jQuery] Re: A general Javascript question: duplicate IDs in a document?
A best practice I've adopted is to utilize classes and ref/rel attributes on dom elements for situations like you're describing. div class=event-phase rel=1/div div class=event-phase rel=2/div div class=event-phase rel=3/div div class=event-phase rel=4/div div class=event-phase rel=5/div Instead of div id=event-phase-1/div div id=event-phase-2/div div id=event-phase-3/div div id=event-phase-4/div div id=event-phase-5/div On Mar 31, 12:31 pm, brian bally.z...@gmail.com wrote: An ID should be unique. That's why it's callled an ID (IDentifier). Repeating an ID in a page will cause problems for any DOM work. For your purposes, you might do something like: div class=Foo id=foo_1/div div class=Bar id=bar_1/div div class=Foo id=foo_2/div div class=Bar id=bar_2/div On Tue, Mar 31, 2009 at 12:24 PM, riotbrrd k...@riotbrrd.com wrote: I realize this is not jQuery specific, but I figured you guys might have some good advice... I often find myself wanting to assign the same ID to multiple elements in a document -- typically when there are several versions of an element which display at different times. Is there a good reason NOT to do this? If so, what's a better practice? thanks, Kim
[jQuery] Re: A general Javascript question: duplicate IDs in a document?
One problem with that approach is that you're polluting the DOM with invalid markup. Rel is not a valid attribute of the div tag. andy -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of Eric Garside Sent: Tuesday, March 31, 2009 1:57 PM To: jQuery (English) Subject: [jQuery] Re: A general Javascript question: duplicate IDs in a document? A best practice I've adopted is to utilize classes and ref/rel attributes on dom elements for situations like you're describing. div class=event-phase rel=1/div div class=event-phase rel=2/div div class=event-phase rel=3/div div class=event-phase rel=4/div div class=event-phase rel=5/div Instead of div id=event-phase-1/div div id=event-phase-2/div div id=event-phase-3/div div id=event-phase-4/div div id=event-phase-5/div On Mar 31, 12:31 pm, brian bally.z...@gmail.com wrote: An ID should be unique. That's why it's callled an ID (IDentifier). Repeating an ID in a page will cause problems for any DOM work. For your purposes, you might do something like: div class=Foo id=foo_1/div div class=Bar id=bar_1/div div class=Foo id=foo_2/div div class=Bar id=bar_2/div On Tue, Mar 31, 2009 at 12:24 PM, riotbrrd k...@riotbrrd.com wrote: I realize this is not jQuery specific, but I figured you guys might have some good advice... I often find myself wanting to assign the same ID to multiple elements in a document -- typically when there are several versions of an element which display at different times. Is there a good reason NOT to do this? If so, what's a better practice? thanks, Kim
[jQuery] Re: A general Javascript question: duplicate IDs in a document?
It is indeed an invalid tag, but given the list of valid div tags is, iirc, class,id,title, there isn't a lot of wiggle-room there. Non- functional attribute declarations on a div usually provide an easier and faster method of dynamic event access than traversing full- declaration classes or generic identifiers, near as I've been able to tell. Is there any major problems you're aware of with this kind of dom pollution that have a negative impact on ease or performance? On Mar 31, 3:05 pm, Andy Matthews li...@commadelimited.com wrote: One problem with that approach is that you're polluting the DOM with invalid markup. Rel is not a valid attribute of the div tag. andy -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of Eric Garside Sent: Tuesday, March 31, 2009 1:57 PM To: jQuery (English) Subject: [jQuery] Re: A general Javascript question: duplicate IDs in a document? A best practice I've adopted is to utilize classes and ref/rel attributes on dom elements for situations like you're describing. div class=event-phase rel=1/div div class=event-phase rel=2/div div class=event-phase rel=3/div div class=event-phase rel=4/div div class=event-phase rel=5/div Instead of div id=event-phase-1/div div id=event-phase-2/div div id=event-phase-3/div div id=event-phase-4/div div id=event-phase-5/div On Mar 31, 12:31 pm, brian bally.z...@gmail.com wrote: An ID should be unique. That's why it's callled an ID (IDentifier). Repeating an ID in a page will cause problems for any DOM work. For your purposes, you might do something like: div class=Foo id=foo_1/div div class=Bar id=bar_1/div div class=Foo id=foo_2/div div class=Bar id=bar_2/div On Tue, Mar 31, 2009 at 12:24 PM, riotbrrd k...@riotbrrd.com wrote: I realize this is not jQuery specific, but I figured you guys might have some good advice... I often find myself wanting to assign the same ID to multiple elements in a document -- typically when there are several versions of an element which display at different times. Is there a good reason NOT to do this? If so, what's a better practice? thanks, Kim
[jQuery] Re: A general Javascript question: duplicate IDs in a document?
Is there any major problems you're aware of with this kind of dom
pollution that have a negative impact on ease or performance?
My thoughts:
Firstly: Validate!
But I think that negative impact on whatever isn't the point.
Suppose:
Option 1 - font size=7bHeading level 1/font/b
Option 2 - h1Heading level 1/h1
What option should we use?
So, the point goes beyond validation: It's a semantic issue too.
Specs says: http://www.w3.org/TR/REC-html40/struct/links.html#adef-rel
rel attribute: This attribute describes the relationship from the current
document to the anchor specified by the href attribute
and says more: http://www.w3.org/TR/REC-html40/index/attributes.html
rel attribute is allowed for A and LINK elements only
---
div class=event-phase rel=1/div
div class=event-phase rel=2/div
div class=event-phase rel=3/div
Instead of
div id=event-phase-1/div
div id=event-phase-2/div
div id=event-phase-3/div
I think that 2nd approach is better not only because validades but it is a
easy way to target each element using a counter in the loop.
Something like:
$('.event-phase-' + i)
PS: If you have control over the id name use a shorter one like: evph1,
evph2 etc...
Regards
Maurício
---
[jQuery] Re: A general Javascript question: duplicate IDs in a document?
Right, but the problems with that approach is inefficiency. It's more
efficient to grab the entire set of elements via $('.event-phase') and
comparing their rel attribute than it is to throw a loop around $
('.event-phase-' + i);
I use ref/rel for the same basic semantic ideas behind their ascribed
meaning. In implementations of code I've done, I try and use ref for
any situation where the element is referencing an action or event
which the element is a target of, and rel for situations where the
element is referencing a target action or event. I think one of the
larger problems here is attempting to, efficiently, get enhanced
functionality out of XHTML, which is still very basic when it comes to
element properties and relationships of dom elements.
It's a shame there isn't a slushy attribute to utilize for storing
information that has nothing to do with markup or presentation, but
rather a strong binding to javascript. Classes do a decent job for
identification, but there's no real good element attribute to use for
configurations of elements. Perhaps sometime in the future there will
be a configuration attribute we can use for this sort of affair that
will bring both optimized functionality and strictly valid code.
On Mar 31, 4:13 pm, Mauricio \(Maujor\) Samy Silva
css.mau...@gmail.com wrote:
Is there any major problems you're aware of with this kind of dom
pollution that have a negative impact on ease or performance?
My thoughts:
Firstly: Validate!
But I think that negative impact on whatever isn't the point.
Suppose:
Option 1 - font size=7bHeading level 1/font/b
Option 2 - h1Heading level 1/h1
What option should we use?
So, the point goes beyond validation: It's a semantic issue too.
Specs says:http://www.w3.org/TR/REC-html40/struct/links.html#adef-rel
rel attribute: This attribute describes the relationship from the current
document to the anchor specified by the href attribute
and says more:http://www.w3.org/TR/REC-html40/index/attributes.html
rel attribute is allowed for A and LINK elements only
---
div class=event-phase rel=1/div
div class=event-phase rel=2/div
div class=event-phase rel=3/div
Instead of
div id=event-phase-1/div
div id=event-phase-2/div
div id=event-phase-3/div
I think that 2nd approach is better not only because validades but it is a
easy way to target each element using a counter in the loop.
Something like:
$('.event-phase-' + i)
PS: If you have control over the id name use a shorter one like: evph1,
evph2 etc...
Regards
Maurício
---
[jQuery] Re: A general Javascript question: duplicate IDs in a document?
That approach is only more efficient because the original design was
lacking.
Also, you can just use the starts(^) attribute selector $(div
[id^='event-phase'])
to retrieve all IDs that start with 'event-phase'.
You don't get to make up new meaning for existing attributes because
you think it should work that way. (well you can do whatever you want
but
it's not a practice people learning HTML should adopt unless they
don't care
about valid and/or semantic markup)
rel is for linking external documents, not describing a relationship
between 2 nodes.
On Mar 31, 2:42 pm, Eric Garside gars...@gmail.com wrote:
Right, but the problems with that approach is inefficiency. It's more
efficient to grab the entire set of elements via $('.event-phase') and
comparing their rel attribute than it is to throw a loop around $
('.event-phase-' + i);
I use ref/rel for the same basic semantic ideas behind their ascribed
meaning. In implementations of code I've done, I try and use ref for
any situation where the element is referencing an action or event
which the element is a target of, and rel for situations where the
element is referencing a target action or event. I think one of the
larger problems here is attempting to, efficiently, get enhanced
functionality out of XHTML, which is still very basic when it comes to
element properties and relationships of dom elements.
It's a shame there isn't a slushy attribute to utilize for storing
information that has nothing to do with markup or presentation, but
rather a strong binding to javascript. Classes do a decent job for
identification, but there's no real good element attribute to use for
configurations of elements. Perhaps sometime in the future there will
be a configuration attribute we can use for this sort of affair that
will bring both optimized functionality and strictly valid code.
On Mar 31, 4:13 pm, Mauricio \(Maujor\) Samy Silva
css.mau...@gmail.com wrote:
Is there any major problems you're aware of with this kind of dom
pollution that have a negative impact on ease or performance?
My thoughts:
Firstly: Validate!
But I think that negative impact on whatever isn't the point.
Suppose:
Option 1 - font size=7bHeading level 1/font/b
Option 2 - h1Heading level 1/h1
What option should we use?
So, the point goes beyond validation: It's a semantic issue too.
Specs says:http://www.w3.org/TR/REC-html40/struct/links.html#adef-rel
rel attribute: This attribute describes the relationship from the current
document to the anchor specified by the href attribute
and says more:http://www.w3.org/TR/REC-html40/index/attributes.html
rel attribute is allowed for A and LINK elements only
---
div class=event-phase rel=1/div
div class=event-phase rel=2/div
div class=event-phase rel=3/div
Instead of
div id=event-phase-1/div
div id=event-phase-2/div
div id=event-phase-3/div
I think that 2nd approach is better not only because validades but it is a
easy way to target each element using a counter in the loop.
Something like:
$('.event-phase-' + i)
PS: If you have control over the id name use a shorter one like: evph1,
evph2 etc...
Regards
Maurício
---
[jQuery] Re: A general Javascript question: duplicate IDs in a document?
On Apr 1, 7:42 am, Eric Garside gars...@gmail.com wrote:
Right, but the problems with that approach is inefficiency. It's more
efficient to grab the entire set of elements via $('.event-phase') and
comparing their rel attribute than it is to throw a loop around $
('.event-phase-' + i);
I use ref/rel for the same basic semantic ideas behind their ascribed
meaning. In implementations of code I've done, I try and use ref for
any situation where the element is referencing an action or event
which the element is a target of, and rel for situations where the
element is referencing a target action or event. I think one of the
larger problems here is attempting to, efficiently, get enhanced
functionality out of XHTML, which is still very basic when it comes to
element properties and relationships of dom elements.
XHTML is just HTML as XML, it doesn't provide an excuse to use invalid
attributes. There is nothing in the XHTML specification that allows
invalid attributes. If you want to go to a custom DTD, use XML, which
may lead you to the vagaries of client-side XSLT.
Good luck making that cross-browser!
It's a shame there isn't a slushy attribute to utilize for storing
information that has nothing to do with markup or presentation,
There is, it's called class.
but
rather a strong binding to javascript.
All (standard) element attributes are available as DOM properties,
that should be sufficient. The various specifications are written to
be script language agnostic, which is a good thing even if javascript
is used in almost every case.
Classes do a decent job for
identification, but there's no real good element attribute to use for
configurations of elements. Perhaps sometime in the future there will
be a configuration attribute we can use for this sort of affair that
will bring both optimized functionality and strictly valid code.
The class attribute can have multiple values that can be used for
whatever purpose you like. They just happen to also be used as a CSS
selector (as are other attributes of HTML elements such as ID and tag
name).
--
Rob
[jQuery] Re: A general Javascript question: duplicate IDs in a document?
On Tue, Mar 31, 2009 at 5:42 PM, Eric Garside gars...@gmail.com wrote:
Right, but the problems with that approach is inefficiency. It's more
efficient to grab the entire set of elements via $('.event-phase') and
comparing their rel attribute than it is to throw a loop around $
('.event-phase-' + i);
Which is why I suggested this approach:
div class=event-phase id=evph_1/div
div class=event-phase id=evph_2/div
div class=event-phase id=evph_3/div
div class=event-phase id=evph_4/div
div class=event-phaseid=evph_5/div
[jQuery] Re: A general Javascript question: duplicate IDs in a document?
Right, but the problems with that approach is inefficiency. It's more
efficient to grab the entire set of elements via $('.event-phase') and
comparing their rel attribute than it is to throw a loop around $
('.event-phase-' + i);
I think it depends upon the context.
If the loop is needed for achieve the purpouse of the script the approach
is efficient.
[jQuery] Re: A general Javascript question: duplicate IDs in a document?
You can store data in the class attribute. See the jquery.metadata
plugin: http://docs.jquery.com/Plugins/Metadata. You can also use the
data() method in jQuery, it's meant for this.
- ricardo
On Mar 31, 6:42 pm, Eric Garside gars...@gmail.com wrote:
Right, but the problems with that approach is inefficiency. It's more
efficient to grab the entire set of elements via $('.event-phase') and
comparing their rel attribute than it is to throw a loop around $
('.event-phase-' + i);
I use ref/rel for the same basic semantic ideas behind their ascribed
meaning. In implementations of code I've done, I try and use ref for
any situation where the element is referencing an action or event
which the element is a target of, and rel for situations where the
element is referencing a target action or event. I think one of the
larger problems here is attempting to, efficiently, get enhanced
functionality out of XHTML, which is still very basic when it comes to
element properties and relationships of dom elements.
It's a shame there isn't a slushy attribute to utilize for storing
information that has nothing to do with markup or presentation, but
rather a strong binding to javascript. Classes do a decent job for
identification, but there's no real good element attribute to use for
configurations of elements. Perhaps sometime in the future there will
be a configuration attribute we can use for this sort of affair that
will bring both optimized functionality and strictly valid code.
On Mar 31, 4:13 pm, Mauricio \(Maujor\) Samy Silva
css.mau...@gmail.com wrote:
Is there any major problems you're aware of with this kind of dom
pollution that have a negative impact on ease or performance?
My thoughts:
Firstly: Validate!
But I think that negative impact on whatever isn't the point.
Suppose:
Option 1 - font size=7bHeading level 1/font/b
Option 2 - h1Heading level 1/h1
What option should we use?
So, the point goes beyond validation: It's a semantic issue too.
Specs says:http://www.w3.org/TR/REC-html40/struct/links.html#adef-rel
rel attribute: This attribute describes the relationship from the current
document to the anchor specified by the href attribute
and says more:http://www.w3.org/TR/REC-html40/index/attributes.html
rel attribute is allowed for A and LINK elements only
---
div class=event-phase rel=1/div
div class=event-phase rel=2/div
div class=event-phase rel=3/div
Instead of
div id=event-phase-1/div
div id=event-phase-2/div
div id=event-phase-3/div
I think that 2nd approach is better not only because validades but it is a
easy way to target each element using a counter in the loop.
Something like:
$('.event-phase-' + i)
PS: If you have control over the id name use a shorter one like: evph1,
evph2 etc...
Regards
Maurício
---
