CODEWITHSUNDEEP
html
max7
max7

Reputation: 798

Best place for HTML5 data-value attribute?

I have the following HTML:

<ul class='dropSelect'>
    <li data-value="one">
        <span>Menu1</span>
    </li>
    <li data-value="two">
        <span>Menu2</span>
    </li>
    <li data-value="three">
        <span>Menu3</span>
    </li>
</ul>

My question is: is it better practice to place the data-value attribute on the span next to the actual menu item text or is it just as good to place on the parent li element as I have done? This attribute will receive data from a web service and I'm using some js to grab the value of this attribute and placing it inside of another element on the page.

SOF warned me upon posting this question that it might be too subjective ... and it might be ... but my concern is to understand what, if any, impact my placement of this attribute may have on UI engineering, javascript DOM manipulation, accessibility, etc.

Upvotes: 1

Views: 4353

Answers (5)

Shankar Cabus
Shankar Cabus

Reputation: 9792

It is not necessary to use the data attribute for this information.

Try to use pseudo class selectors of CSS or jQuery to bind the specif item:

CSS:

.dropSelect li:nth-child(1) {
  // First <li>
}

Or jQuery:

// Second <li>
$('.dropSelect li').eq(1)

DEMO: http://jsfiddle.net/wYpK6/

Upvotes: 0

Rob Cowie
Rob Cowie

Reputation: 22619

Broadly speaking, I suggest storing data on the element that most closely maps to the data's 'parent' or 'owner'. It's all about what conveys the most meaning.

For example, if you are representing a list of 'people' in your html thus 

<ul>
    <li class="person">Tim Bresnan</li>
    <li class="person">Joe Root</li>
</ul>

and you wish to associate a date of birth without displaying it, put it on the li items as they represent the person.

$('.person').data('dob');

If however your html representation of a person is more complex, say

<ul>
    <li class="person">
        <div class="name">Tim Bresnan</div>
        <div class="dob">28th Feb 1985</div>
    </li>
    <li class="person">
        <div class="name">Joe Root</div>
        <div class="dob">30th Dec 1990</div>
    </li>
</ul>

you might wish to include the ISO8601 datetime representation as data on the dob class elements.

$('.person .dob').data('dob');

Upvotes: 2

Robin Maben
Robin Maben

Reputation: 23064

From what it seems like you're trying to do. You could use jQuery's .index(). (Yes, I know it wasn't tagged jQuery)

$('ul.dropSelect > li').each(function(){
  var i = $(this).index();
});

Upvotes: 0

JarroVGIT
JarroVGIT

Reputation: 5324

I would say to put the data-values in the span within the listing. I think it's best to put the data-attribute closest to the string it has an effect on, in this case the span.

On another note, this piece of jQuery works fine:

$(document).ready( function() {
    $("li").click(function(){
       var txt = $(this).text();
       $("#mydiv").text(txt);
    });
});

With this, I've tested in jsFiddle (http://jsfiddle.net/YqePE/) that clicking on a li, can return it's text value, and so it would also return any data-attribute you have in that li.

BUT, if by some sort of weird CSS makeup, it can be possible this would generate an unwelcome outcome, where as you think you don't click a certain LI, the browser thinks you do. To prevent this, you would want to make the span holding the data-attribute.

Upvotes: 1

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

Reputation: 67001

Although html5 data attributes are subjective, and can be used anytime/anywhere, I'm assuming you are looking these elements up by them in your situation. In your situation I'd put them in the same place you did for a couple of reasons.

  • This is the top level (child), so it's very easy to grab them all by the data attribute. $('li[data-value]')

  • At some point you might have much more inside each <li>, right now it might only be the <span> but by having the list-item hold the data-value you can easily get other DOM elements inside of it. If you had it inside of the span you'd have to go UP a level to the list-item, then .find() whatever element you want.

If your span held data-value:

$('[data-value="whatever"]').closest('li').find('.someOtherThing');

Instead now you don't have to do that pointless look-up for the parent <li>!

$('[data-value="whatever"]').find('.someOtherThing');

Upvotes: 1

Related Questions