Как вычислить элемент по длине?

Question

[b_efimenko]

Нужно найти элемент длинной меньше 30 символов и и дать им пару стилей

if($('.col-md-8.blog-posts .col-sm-6 h3').text().length < 30){
        $(this).css('line-height','34px').css('margin-bottom','23px')
   }

Я знаю что это не правильно, как правильно обратится к элементам длинной меньше 30 символов?

Answer 1

[Александр Цымбал]

нужно перебрать каждый элемент из набора и проверить его длину

$('.col-md-8.blog-posts .col-sm-6 h3').each(function(){
if($(this).text().length < 30){
        $(this).css('line-height','34px').css('margin-bottom','23px')
   }
});

Comments

[YemSalat]

Только лучше бы $(this) закэшировать внутри вызова .each()

[Александр Цымбал]

@YemSalat: не знаю, как кешировать. ну-ка рассказывай, заинтересовал.

[YemSalat]

@AlexanderTsymbal:
Ну "кэшировать" - это слово такое красивое просто :)
Я имею в виду вот это:

var $this = $(this);
if($this.text().length < 30){
        $this.css('line-height','34px').css('margin-bottom','23px')
   }
});

Чтобы не создавать заново jquery объект из this.

[Александр Вульф]

Тогда

var $this = $(this);
if ($this.text().length < 30) {
  $this.css({ lineHeight: '34px', marginBottom: 23 });
}
});

[YemSalat]

@AlexanderTsymbal: Просмотрел.
Bместо:

$this.css('line-height','34px').css('margin-bottom','23px');

Лучше делать:

$this.css({ 'line-height': '34px', 'margin-bottom': '23px' });

[aen]

А еще лучше вынести стили в css и вешать только класс.

[Александр Цымбал]

Ну ладно вам, педантам. :)
Я думаю, задача ясна.
"Украшать" можно сколько угодно. Если на странице не больше 50 совпадений, то зрительно на производительность ни одно из улучшений не повлияет.

Answer 2

[Ренат Абдусаламов]

Мне лично кажется, что вы не ту проблему решаете и делаете какой-то костыль.
Возможно, вам нужен Media Queries?