Iterate over an array of divs
I've had to resort to this bodge to set height of div01-05 different to div11-15 :(
var maxheight = divheight;
var dayofweek = <?echo date("w",strtotime($today));?>;
var heightoffset = (2 - dayofweek) * 40;
var days = jQuery('div.day01, div.day02, div.day03, div.day04, div.day05');
for (i=0; i<days.length; i++){
var hh = jQuery(days[i]).prop("scrollHeight");
if (hh > maxheight) {
maxheight = hh;
};
jQuery(days[i]).height(divheight+heightoffset);
};
var days = jQuery('div.day11, div.day12, div.day13, div.day14, div.day15');
for (i=0; i<days.length; i++){
var hh = jQuery(days[i]).prop("scrollHeight");
if (hh > maxheight) {
maxheight = hh;
};
jQuery(days[i]).height(divheight-heightoffset);
};
//Back to full array for further processing
var days = jQuery('div.day01, div.day02, div.day03, div.day04, div.day05, div.day11, div.day12, div.day13, div.day14, div.day15');
Would someone please put me out of my misery and show me how to just iterate over all the divs and do a conditional set height.
One caveat is that PHP is greating the divs and div.day01 -04 might not exists depending on day of the week div.day05 always does and so do divs day11-15
regards Simon
Final code result(having corrected to using ids instead of classes :)
jQuery('div[id^="day"]').each(function() {
var hh = jQuery(this).prop("scrollHeight");
if (hh > maxheight) {maxheight = hh;};
var cn = jQuery(this).attr('id').split(" ")[0]; // Since PHP is creating these classes, we can safely assume "day" will always be the first.
var num = parseInt(cn.slice(-2),10); // extract the last two characters and convert to an integer
if (num >=1 && num <= 5) {
jQuery(this).height(divheight+heightoffset);
}else if(num &g开发者_如何学Got;=10 && num <= 15){
jQuery(this).height(divheight-heightoffset);
}
});
$('div[class^="day"]').each(function() {
var cn = $(this).attr('class').split(" ")[0]; // Since PHP is creating these classes, we can safely assume "day" will always be the first.
var num = parseInt(cn.slice(-2),10); // extract the last two characters and convert to an integer
if (num >=1 && num <= 5) {
// Working with div 01-05
}else if(num >=10 && num <= 15){
// Working with div 11-15
}
});
To iterate over all divs on the page, use
jQuery('div').each(function(d) {
//This code will run for each div on the page
//Just put any conditionals in here
//Use jQuery(this) to refer to the current div
});
EDIT:
Use jQuery(this).attr('name')
to access the name of the current element.
Use jQuery(this).attr('id')
to access the id of the current element.
Use jQuery(this).hasClass('classname')
(boolean) to check if the current element has the indicated class.
You can use $('div')
to loop through every div
on the page, then use a regex to get just the div
s you want. You can even limit the div
s jQuery loops over using [class*="day"]
.
$('div[class*="day"]').each(function(){
var dayClass = this.className.match(/day\d*/);
if(dayClass != null){ // if the div contains the class day..
var dayID = dayClass[0].replace('day', ''); // 01, 02, 03, etc.
if(dayID >=1 && dayID <= 5){
}
else if(dayID >= 11 && dayID <= 15){
}
else{
}
}
});
Demo: http://jsfiddle.net/9kxSF/1/
A better idea here would be to give all the div
s a class of say "dayDiv", as well was the "day01" or "day02" class, so then you could do $('div.dayDiv')
to get the div
s you wanted.
<div class="dayDiv day01"></div>
<div class="dayDiv day02"></div>
Then in jQuery:
$('div.dayDiv').each(function(){
var dayClass = this.className.match(/day\d*/);
var dayID = dayClass[0].replace('day', ''); // 01, 02, 03, etc.
if(dayID >=1 && dayID <= 5){
}
else if(dayID >= 11 && dayID <= 15){
}
else{
}
});
精彩评论