Добавить заполнение-снизу, когда выдержка превышает определенный предел

#jquery #html #css #conditional

#jquery #HTML #css #условные операторы

Вопрос:

Я пытаюсь написать условие 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"});
}

Очевидно, что это не работает. Я чувствую, что это простое решение, которое я не нахожу. Кто-нибудь может помочь? Заранее спасибо.

1. Проблема в том, что $(this) не указывает на ЭЛЕМЕНТ, но указывает, когда вы пишете событие типа click , поэтому jquery задается вопросом, что рассматривать как это

2. Есть ли способ указать, что я хочу, чтобы оператор в условном для элемента be, который получает примененный CSS?

3. var myElement = $(‘div.post-right p’); if ( myElement.text().длина> 200 ) { myElement.parent().parent().css({«заполнение снизу»: «45 пикселей»}); }

Ответ №1:

Есть пара моментов, которые выглядят подозрительно, я изложу свои мысли:

1. .text() Метод

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

2. $(this)

Убедитесь, что это указывает на правильный объект запуска

3. .parent() Метод

Убедитесь, что .parent().parent() точки указывают на нужный вам узел — здесь могут помочь инструменты разработчика Chrome.

4. .css() альтернативный синтаксис

Я не уверен, имеет ли это значение, но попробуйте эти альтернативы:

 .css({paddingBottom: 45px});

и синтаксис единого свойства

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

Ответ №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');
        }
 });
});

Ответ №3:

В этом случае было бы полезно еще немного вашего JS. Я предполагаю $(this) , что это неправильный элемент.

Я бы сначала определил это как переменную, а затем использовал бы ее вместо $(this) перед привязкой к .parent() методу.