Is passing values to javascript/JQuery through the id attribute in tags common practice? Is it safe?

Question

I find myself doing this a lot, for specific properties for animation purposes, and specially when I'm generating something using database values obtained through PHP. Is there a reason not to do this.

Some sample code, to clear up ambiguity.

This would be the JQuery:

$('.class').each(function(){
    var my_new_width = $(this).attr('id');
            $(this).stop(false, true).animate({width: my_new_width}, 100);
}); 

HTML would be:

<img id='100' src='path'/>

Obviously this code offers no functionality, and is meant to be used with a .hover() or something. Just wanted to clear up the ambiguity in the question.

Answer 1

If you mean what I think you mean, it is a very common practice and you should find it relatively safe, It would help if you included some example code.

As long as the ids on your elements are unique, you should never have an issue with accessing multiple ones at the same time.

Here are the jQuery docs on the Id selector.. Essentially, the syntax is $("#elementId"). Since the selector is just a string literal, you can inject the id of an element in this way: $("#" + elementId), where elementId in this case is a variable.

The only reason not to do this is when you find yourself repeating the same jQuery over and over for lots of elements where the only difference between the scripts is the Id passed. In this case you should use a class selector:

Where you will really experience the power of jQuery, is when you start to select against classes using the selector syntax: $(".className"). This returns a "wrapped set" of elements, essentially an array of matched elements.

It allows you to bind beahviour to multiple elements in a single call. It is this feature that drastically reduces the number of lines of script on most of my pages.

Answer 2

Using id attributes as a placeholder for information is common practice and safe, as long as you pay attention to some guidelines:

• Ids must be unique
• Ids aren't allowed to start with a number

What is more controversial is to use a custom attribute for placeholder. Using jQuery it is very easy to assign and retrieve the value from the attribute. This will make your code easier to read and maintain, however it will break HTML validation.

Answer 3

It seems very counter-intuitive to me, mostly because it seems unlikely that you could guarantee uniqueness, but also because it's just not what an ID is meant to be - it would be confusing to someone else reading your code.

Perhaps if you post a more complete example of how you're using it, it would be easier for people to suggest a better approach.

Answer 4

According to W3C id's must begin with a letter, not that I expect it to blow up if you don't. In HTML5 you will have the data- prefix to use when trying to embed data.

See this SO question for more discussion and information: http://stackoverflow.com/questions/992115/custom-attributes-yay-or-nay

Personally, I prefer to use the rel attribute... for some reason it feels right to me... even though its wrong and not w3c compliant.