Question

我试图编写一个jQuery条件，当它内部的段落超过一定数量的字符时，将填充添加到div的底部。我在博客上工作，头版上有博客摘录，如果时间过长，会在移动设备上相互重叠。源代码看起来像这样：

<section class="lcp_catlist">
    <div class="post-left"></div>
    <div class="post-right">
        <a href="#">Blog Title Here</a>
        <p>A long blog excerpt would go here</p>
    </div>
</section>

我试图解决这个问题的jQuery如下：

if ( $('div.post-right p').text().length > 200 ) {
        $(this).parent().parent().css({"padding-bottom" : "45px"});
}

显然这不起作用。我觉得这是一个我找不到的简单解决方案。有人可以帮忙吗？提前致谢。

Answer 1

有几点看起来很可疑，我会概述我的想法：

<强> 1。 .text()方法

$('div.post-right p').html().trim().length > 200

<强> 2。 $(this)

确保这指向正确的射击物体

第3。 .parent()方法

确保.parent().parent()指向您想要的节点 - Chrome的Dev Tools可以在此处提供帮助。

<强> 4。 .css()替代语法

我不确定这是否有所作为，但请尝试以下方法：

.css({paddingBottom: 45px});

和单一属性语法

.css('paddingBottom', '45px');

Answer 2

首先，我建议你将

标签包装在博客摘录的范围内，因为我不相信你可以在

标签中添加填充，另外，您可以编写一个将遵循每个博客帖子元素的函数，并执行类似的操作;

<section class="lcp_catlist">
<div class="post-left"></div>
<div class="post-right">
    <a href="#">Blog Title Here</a>
    <span class="blogEntry"><p>A long blog excerpt would go here</p></span>
</div>
</section>

和

$(document).ready(function(){
    $('.blogEntry').each(function(){
        var charCount = $('.blogEntry').length();
        if(charCount >= 2000){
             $('.blogEntry').css('padding-bottom','20px');
        }
 });
});

Answer 3

在这种情况下，你的一些JS会有所帮助。我猜$(this)不是正确的元素。

我首先将其定义为变量，然后在绑定到$(this)方法之前使用它代替.parent()。

当摘录超过一定限度时添加填充底部

3 个答案: