- This topic is empty.
-
AuthorPosts
-
March 12, 2013 at 7:04 pm #43342matt_sanfordParticipant
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/ACpjLWhat 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 #127984CrocoDillonParticipantBasically, 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 #128064matt_sanfordParticipantWord. 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/ACpjLThanks a lot! @CrocoDillon
March 13, 2013 at 12:37 pm #128070CrocoDillonParticipant`$(‘[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 #128071matt_sanfordParticipant@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 #128084CrocoDillonParticipant$(‘[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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.