jquery - `p` 的长度，在父 `class` jQuery 中更改 `div`

Question

我正在尝试根据其子 p.descr 的文本长度调整父 div 的 height。我通过应用 class 来做到这一点，它又在 CSS 中具有不同的 height。找到下面的 jQuery 代码:

$(document).ready(function(){  
  $('p.descr').each(function(){
        if($(this).text().length < 90){
          $(this).parent().addClass('bigP90');
        } if($(this).text().length [90,180]) {
          $(this).parent().addClass('bigP180');
        } if($(this).text().length [181,270]) {
          $(this).parent().addClass('bigP270');
        } if($(this).text().length [271,360]) {
          $(this).parent().addClass('bigP360');
        } if($(this).text().length > 360) {
          $(this).parent().addClass('bigP450');
        }
  });
});

问题是 class bigP90 和 bigP450 得到应用并且工作正常，但不是中间的那些。这意味着语法有问题但无法弄清楚是什么。谢谢。

Answer 1

length [90,180] 不测试长度是否在 90 和 180 之间。方括号用于访问数组元素或对象属性，因此这会将 length 视为数组并尝试访问数组的第 180 个元素。

在 Javascript 中没有用于测试范围的简短语法。您只需测试它是否高于下限并低于上限，例如

if (val >= 90 && val < 180)

但是因为你已经用前面的if测试了下限，你可以使用else if来测试下一个上限，下限测试将是多余的。

$(document).ready(function() {
  $('p.descr').each(function() {
    var len = $(this).text().length;
    var parent = $(this).parent();
    if (len < 90) {
      parent.addClass('bigP90');
    }
    else if (len < 180) {
      parent.addClass('bigP180');
    }
    else if (len < 270) {
      parent.addClass('bigP270');
    }
    else if (len < 360) {
      parent.addClass('bigP360');
    }
    else {
      parent.addClass('bigP450');
    }
  });
});