Question

我试图获得div中每个h2的高度，然后如果该高度高于21px，则将该类应用于该h2或更改其css。

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

http://www.elisagilis.be

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

$('.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 / class应用于所有这些。 - 如果你有一个比我考虑的更好的解决方案，他们也会受到欢迎。

非常感谢你的帮助！

Answer 1

我认为这就是你要找的东西

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

只需将其更改为您的偏好。

https://jsfiddle.net/370mg7ak/1/

Answer 2

也许这就是你想要的：FIDDLE

HTML

<div class="cta">
    <span class="cta-title">one line</span>
</div>
<div class="cta">
    <span class="cta-title">one line</span>
</div>
<div class="cta">
    <span class="cta-title">this will take up two lines</span>
</div>

CSS

.cta { width: 100px; float: left; height: 100px; border: 1px solid black; }
.cta-title { width: 100%; color: white; background: black; display: inline-block; }
.two-line { background-color: red; }

的jQuery

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

Answer 3

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

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

这会附加到window的{{1}}事件，并根据onresize选择器过滤事件。但是，在这种情况下，您可能还需要考虑页面大小是否再次变大，那么您还需要初始化大小写。

".post-details h2"

Answer 4

我可能会从position:absolute;标记中删除<p>并让元素自然流动。这样您就不必担心维护任何额外的javascript。

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

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

Answer 5

替换以下代码

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

Answer 6

我最终将我的元素分组到一个div中，我只用css定位。

获取元素的高度然后添加class / change css

6 个答案: