1

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!

Jordan Arsenault
  • 7,100
  • 8
  • 53
  • 96

4 Answers4

6

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.

Mark Perry
  • 1,705
  • 10
  • 12
1

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.

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
  • Yeah, another reason I don't particularly like using classes is because it's hard on the designer. I'd like to keep all id's and classes free of any identifier that is solely used as a javascript identifier. Thanks for the tip. – Jordan Arsenault Jul 08 '11 at 17:38
0

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! :)

Michael Wright
  • 581
  • 2
  • 2
  • What I don't like about my method is the fact I must perform a .replace() to grab an obvious and important piece of information about the element which fired the event. Call me a pedant but this issue is reoccurring and I was just curious if a better - more semantic - solution exists. – Jordan Arsenault Jul 08 '11 at 17:42
0

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, ''); }
Community
  • 1
  • 1
josemota
  • 974
  • 1
  • 8
  • 27
  • Thanks josemota, you're right - It makes more sense to define the opposite because the function can be used on any element. As it stands... In an effort to keep my id's and classes void of javascript identifiers I think I will opt for the data-* method suggested by Mark. By using this method I can keep the ids and classes empty; my designer and I will not step on each others toes. – Jordan Arsenault Jul 08 '11 at 17:49