迭代一系列div

时间:2011-09-14 13:57:55

标签: javascript jquery

我不得不求助于这个bodge将div01-05的高度设置为与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');

有人请让我摆脱痛苦,并告诉我如何迭代所有的div并做一个有条件的设定高度。

有一点需要注意的是,PHP正在改变div并且div.day01 -04可能不存在,这取决于div.day05总是这样的星期几,所以divs day11-15

问候 西蒙

最终代码结果(已更正为使用ID而不是类:)

    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 >=10 && num <= 15){
            jQuery(this).height(divheight-heightoffset);
        }
    });

3 个答案:

答案 0 :(得分:2)

$('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
  }
});

答案 1 :(得分:1)

要遍历页面上的所有div,请使用

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
});

修改

使用jQuery(this).attr('name')访问当前元素的名称。

使用jQuery(this).attr('id')访问当前元素的ID。

使用jQuery(this).hasClass('classname')(布尔值)检查当前元素是否具有指定的类。

答案 2 :(得分:1)

您可以使用$('div')遍历页面上的每个div,然后使用正则表达式获取您想要的div个。您甚至可以使用div限制[class*="day"]的jQuery循环。

$('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{
     }
   }
});

演示:http://jsfiddle.net/9kxSF/1/

这里更好的想法是给所有div sa类说“dayDiv”,以及“day01”或“day02”类,那么你可以$('div.dayDiv')来得到你想要的div

<div class="dayDiv day01"></div>
<div class="dayDiv day02"></div>

然后在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{
    }
});