Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS HTML5 data attributes and Jquery problem

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #43342
    matt_sanford
    Participant

    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

    #127984
    CrocoDillon
    Participant

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

    #128064
    matt_sanford
    Participant

    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

    #128070
    CrocoDillon
    Participant

    `$(‘[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

    #128071
    matt_sanford
    Participant

    @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.

    #128084
    CrocoDillon
    Participant

    $(‘[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)
  • The forum ‘CSS’ is closed to new topics and replies.