Javascript 获取元素的高度，然后添加类/更改css

我试图得到一个div中每个h2的高度，如果这个高度高于21px，那么对这个h2应用一个类或者改变他的css

原因是，当标签超过一行时，我的项目标题与标签重叠：

到目前为止，我已经尝试过：

$('.post-details h2').each(function(){
     if($(this).height() > 21)
     {
         $(this).css({"margin-top": "315px", "line-height": "28px"});
     }
 });

这是：

$('.post-details h2').each(function(){
    if($(this).height() > 21)
    {
        $(this).addClass('margintop');
    }
});

它们都不起作用。 我也尝试过不使用每一个，但都不起作用，因为它会选择我的所有h2，并将css/类应用于所有h2。 -如果你有比我考虑的更好的解决方案，也欢迎你

---

非常感谢你的帮助

我想这就是你要找的

<h2>some text</h2>
<h2>some text<br>some more</h2>

.border {border:1px solid blue;}

$('h2').each(function(){

    alert($(this).height()); 

    if($(this).height() > 30)
    {
        $(this).addClass('border');
    }
});

一些文本
一些文本
更多
.border{border:1px纯蓝色；}
$（'h2'）。每个（函数（）{
警报（$（this.height（））；
如果（$（此）.height（）>30）
{
$（this.addClass（'border'）；
}
});

只需将其更改为您的首选项

---

也许这就是你想要的：

HTML

jQuery

$(document).ready(function() {
$(function(){
  var $tArray = $('div.cta').children('span');
  $tArray.each(function(){
    if ($(this).height() > 18) {
        $(this).addClass('two-line');
    }
  });
});
    });

---

要使值在窗口调整大小时动态更改，请尝试以下操作：

$(window).on("resize", ".post-details h2", function(){
    if($(this).height() > 21)
    {
        $(this).addClass('margintop');
    }
});

这会附加到

窗口的
onresize
事件，并根据
“.post details h2”
选择器过滤事件。但是，在这种情况下，您可能还必须考虑如果页面大小再次变大，那么您还需要初始化案例

//Initial setup
$(".post-details h2").each(function(){
    if($(this).height() > 21)
        $(this).addClass('margintop');
});

//On window resize
$(window).on("resize", ".post-details h2", function(){
    if($(this).height() > 21)
        $(this).addClass('margintop');
    else
        $(this).removeClass('margintop');
});

我可能会删除
位置：绝对
标签中选择code>，让元素自然流动。这样，您就不必担心维护任何额外的javascript

要获得底部的20px填充，可以添加以下样式：

.post-details > a, .post-details p { transform: translateY(-20px); }

替换以下代码

$('.post-details h2').each(function(){
  if($(this).height() > 21)
  {
    $(this).css({"margin-top": "315px", "line-height": "28px"});
  }
});

与

我最终将我的元素分组到一个单独的div中，我只使用css定位。您是否检查了HTML或添加了console.log以验证
each（）
是否正在运行？您具体查询的高度是多少？除非您已经为
h2
元素设置了样式，否则它们都应该具有相同的高度。@Aweary：它们没有，因为两行标题的高度更高。当您将窗口调整为较小的大小时，我遇到了问题。长标题变成两行标题。这很正常，它们的扩展宽度较小。平板电脑，每个例子，将看到2行标题重叠的标签，这是我不想要的。所以我正试图找到解决这个问题的办法。我明白了吗？@jwatts1980:我的控制台没有任何错误。我应该找一些具体的东西吗？关键是“调整大小”的注释。。正在研究解决方案。嗯，这不是我在上面所做的（代码的第二部分）吗（啊，我不明白。为什么会出现警报？那不是弹出窗口吗？嗯，也许我没听懂你的意思，我只是把代码放在一起，让你知道（.each）函数正在工作，它会提醒您的h2标记的高度。显然，一旦您配置了它，您就会删除它。我不明白为什么您的代码不工作。当您重新调整页面大小时会出现问题吗？嗯，我不这么认为，基本上我需要将我的标题完全定位在任何设备上，然后是窗口宽度。现在，我的标题在一定的宽度上重叠了标签，这看起来不好看，而且我迄今为止尝试的修复似乎不起作用：/我不知道为什么，我仍然是Js/JqueryA解决方案中的一个新手，使用css当然会更好！但是，除非我遗漏了什么，否则该解决方案会让我在2下有一个更大的空间行标题：/@elisa我会将
的
行高度
更改为一个较小的值，看看是否有帮助。
。发布详细信息h2{line height:15px；}
应该做这项工作。如果需要，您可能还需要在
的顶部添加一个小边距或填充，以便在标题和标记之间留出一些空间
.post-details > a, .post-details p { transform: translateY(-20px); }

$('.post-details h2').each(function(){
  if($(this).height() > 21)
  {
    $(this).css({"margin-top": "315px", "line-height": "28px"});
  }
});

$(function(){    
  $('.post-details h2').each(function(){
    if($(this).height() > 21)
    {
      $(this).css({"margin-top": "315px", "line-height": "28px"});
    }
  });
});