迭代 div 数组

Question

我不得不求助于这个 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 总是存在，div day11-15 也是如此

问候 西蒙

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

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

Answer 1

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

Answer 2

要迭代页面上的所有 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')

（布尔值）检查当前元素是否具有指定的类。

Answer 3

您可以使用

$('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

提供一个“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{
    }
});