开发者

Iterate over an array of divs

开发者 https://www.devze.com 2023-04-05 07:52 出处:网络
I\'ve had to resort to this bodge to set height of div01-05 different to div11-15 :( var maxheight = divheight;

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 divs you want. You can even limit the divs 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 divs a class of say "dayDiv", as well was the "day01" or "day02" class, so then you could do $('div.dayDiv') to get the divs 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{
    }
});
0

精彩评论

暂无评论...
验证码 换一张
取 消