Grow your CSS skills. Land your dream job.

HTML5 data attributes and Jquery problem

  • # March 12, 2013 at 7:04 pm

    Alright guys so I am trying to make a schedule out of html5 and jquery, I realize there are better ways but I am trying to learn by doing (very new to js) and would like to be pointed in the right direction.
    http://cdpn.io/ACpjL

    What I am trying to do, is eventually write a fifth level heading into each of the “.hour” sections with the time of day. (ex. 8am, 9am, 10am etc. ). I used console.log to see what exactly my parts of the DOM my script was reading. And as you all can probably tell already, it only repeats the first

    12 times where as I want to go through each of the elements and grab the data attribute once. And for each one write an appropriate heading.

    Thanks in advanced

    # March 12, 2013 at 8:00 pm

    Basically, you need to iterate over each element with class `hour` and append the `h3` element (I’m stubborn, by using h5 you’d skip 2 levels)

    `$(function() {
    // select all the hour elements, iterate over them
    $(‘.hour’).each(function() {
    // set innerhtml of the current hour element to the data-time
    // of the current hour element, wrapped in a h3
    $(this).html(‘

    ‘ + $(this).data(‘time’) + ‘

    ‘);
    });
    });`

    The keyword here is current, that’s what `$(this)` means in this context, the current element of the iteration. Commented your JavaScript for contrast:

    `// you set time to the data-time of the first hour element (‘8am’)
    var time = $(‘.hour’).data(‘time’);
    // not sure what this $(‘

    $8am

    ‘) does
    var hour = $(‘

    $’+time+’

    ‘);
    // nice for loop, but you’re doing nothing but printing the same
    // variables 12 times
    for (i=0; i<12; i++) {`

    Hope this helps :)

    EDIT: Sorry, had to use “ to keep this forum from parsing the html tags :’)

    # March 13, 2013 at 11:55 am

    Word. Got that all worked out. I have one last thing I want to do with this. I want js to get the date and depending on what day it is, highlight the header.
    Here is the updated pen. http://cdpn.io/ACpjL

    Thanks a lot! @CrocoDillon

    # March 13, 2013 at 12:37 pm

    `$(‘[data-day=’+d.getDate()+’]’)` targets the div where data-day is current day. The other variables aren’t used anywhere by the way.

    Don’t know why you are using all data attributes though but whatever :P

    # March 13, 2013 at 12:45 pm

    @CrocoDillon Like I said earlier, I know there are a thousand better ways to do it, I am just trying to learn how to do it one way, then learn another way, fix it, and so on. Rather weird that way.

    Edit:
    I know that the variables aren’t being used now, but I am setting myself up to use them later on. Again, I know, super inefficient/weird.

    # March 13, 2013 at 2:38 pm

    $(‘[data-day=’+d.getDate()+’] > h2′).addClass(‘highlight’);

    The [`.data()`](http://api.jquery.com/data/#data2) function only returns the data attribute for the first element of a set, so your variables are pretty much useless. It’s not that inefficient to store values though. It’s a trade-off of memory vs cpu, most of the time memory is abundant.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".