Need 2 id attributes on a div

Question

Usually when I have a div, I use the id attribute to uniquely identify an element.

Ex:

<div id="F123" class="sidebar-item">
    My first item goes here
</div>

Now, I need a double 'key' for my div element: a 'slug' attribute and a 'category' attribute.

E.g.:

<div slug="my-first-item" category="techno" class="sidebar-item">
    My first item goes here
</div>

The compilator warns me that these attributes are not valid. What is the best way to have a double key on a div? I'm pretty sure there are various ways to proceed but I'm curious about the best way?

score 6 · Accepted Answer · answered Feb 08 '12 at 17:33

6

<div data-slug="my-first-item" data-category="techno" class="sidebar-item">
    My first item goes here
</div>

New HTML data attributes. Why do think you need it if I may ask?

answered Feb 08 '12 at 17:33

PeeHaa

71,436
58
190
262

jQuery provides easy access to these data items as well: $(this).data('slug') and $(this).data('category') – tawman Feb 08 '12 at 17:36
@tawman although there isn't a native jQuery selector for it [(although plugins to add this exist)](http://stackoverflow.com/questions/2891452/jquery-data-selector) – PeeHaa Feb 08 '12 at 17:38
hmm .. It works w/ jQuery 1.7.1 and click events. You saying it does not work on selecting a div by Id or other method? – tawman Feb 08 '12 at 17:41
@tawman You cannot use it as an selector. Something like: `$(element[data-slug="my-first-item"])`. Or did they build in support for it it 1.7? – PeeHaa Feb 08 '12 at 17:43
@tawman nvm. It looks like [it DOES work](http://stackoverflow.com/questions/2891452/jquery-data-selector#answer-6595201)! Althoug it only works if it is in the DOM. It doesn't work for dynamic data added using `.data()`. – PeeHaa Feb 08 '12 at 17:45
Your solution fit perfectly well in my situation. I need this 'double key' for my routing (ASP.NET MVC4). Thank you very much. – Bronzato Feb 08 '12 at 18:07

score 2 · Answer 2 · answered Feb 08 '12 at 17:34

2

HTML5 allows you to user data-[info].

<div data-slug="my-first-item"></div>

https://developer.mozilla.org/en/HTML/Global_attributes

answered Feb 08 '12 at 17:34

Trevor

11,269
2
33
40

score 0 · Answer 3 · answered Feb 08 '12 at 17:35

One way to do this would be to use a class and an id. An element can have any number of classes, so you can create a class for each category (with no styles), and then use the id to be more specific (although each id will still have to be unique, even across classes).

Another alternative is to have each id be of the form id="<category>_<slug>", and find ids that start with the category to get all the elements in a category.

score 0 · Answer 4 · answered Feb 08 '12 at 17:42

I don't know what or how you are going to process the date but this is my idea:

<div id="name['slug_value']['category_value']" class="sidebar-item">
    My first item goes here
</div>

Which translates to:

<div id="name['my-first-item']['techno']" class="sidebar-item">
    My first item goes here
</div>

But like the first answer I'm curious about why do you need to do this.

Need 2 id attributes on a div

4 Answers4