I'm new to jQuery (1.5 months) and I've found myself developing a PHP + jQuery habit that I don't particularly like. I'm wondering if anyone has suggestions to make things more elegant. Consider the following HTML that I've generated by performing a simple SQL query and echoed with PHP:
<div id='boat_1' class='boat speedboat'></div>
<div id='boat_2' class='boat dory'></div>
<div id='car_1' class='car racecar'></div>
<div id='car_2' class='car racecar'></div>
As you can see, I've opted for an id
naming convention that follows {type}_{id}
. Now, in jQuery, Assume I want to bind a click handler to these car divs. Remembering that they are dynamic and there could be any number of them, I'd perform:
$(".car").bind('click', function(){
//do something
});
But typically, that //do something
would like to know which car fired the click event. Furthermore, that //do something
will probably need to seperate the type (boat or car) and the id
to perform a POST operation and write 开发者_如何学运维back to the database...(for example)
What I'm doing now to find the id (and other unique information as I need it) is simple, but to me, it smells:
$(".car").bind(function(){
var id = $(this).attr("id").replace("car_", "");
});
One might suggest to use the class attribute instead because you don't have to worry about uniqueness. But because class names are not singular (there can be more than one per element as I've shown), I don't see this as a candidate solution.
Because id's must be unique in the entire document, this is the solution I've settled for. I'm aware getElementById() would break if multiple ids of the same name were made possible but sometimes I wonder if it would be beneficial if ids didn't have to be unique provided they have different parents.
How do you do it?
Should I use HTML5's data-*
?
Thanks!
Yes.
Render HTML like this:
<div data-id="1" class="boat speedboat"></div>
<div data-id="2" class="boat dory"></div>
<div data-id="1" class="car racecar"></div>
<div data-id="2" class="car racecar"></div>
Jquery handler
$(".car").bind(function(){
var $this=$(this);
var id = $this.data("id");
});
Jquery Data function
As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object. The treatment of attributes with embedded dashes was changed in jQuery 1.6 to conform to the W3C HTML5 specification.
I think your method looks good for what you're doing, but I'll point out that in HTML 4 you can use the rel
attribute, which is practically unused, but is valid HTML (so it won't trigger warnings like data-*
will in HTML4 parsers). I use it, just like you proposed using the class attribute, but without the side-effect of munging my classes.
What don't you like about your method? I'd look not to use bind()
but to use click()
. Also if you want, you can chain the classes and alter your //do something
to instead split the id by _ and return the final [1]
item in the array? :)
Your method seems fine to get the numeric id! :)
To be honest, that's what I'd do.
I would however filter it the other way around and make it a function like this guy correctly suggested and pull the number out of the string:
function pullNumber(n) {
return n.replace(/[^0-9]/g, ''); }
精彩评论