Как динамически изменить размер тега hX, если родительский div содержит дочерний div класса X - PullRequest
Новая
       26

Как динамически изменить размер тега hX, если родительский div содержит дочерний div класса X

3 голосов
/ 01 августа 2011

У меня проблемы с jquery, и я очень надеюсь, что кто-то там может помочь!

У меня есть следующий HTML: 

<div class="widgetContent">
        <div class="thumbNail"> </div>
        <h4>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce feugiat mauris non
            libero.
        </h4>
        <div class="clear">
        </div>
        <span class="newsDate">10th March 2011</span>
        <p class="widgetTexSummary">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce feugiat ...</p>
</div>

<div class="widgetContent">
        <div class="widgetEventsDate">
            <span class="month">Mar</span> <span class="date">24</span></div>
        <h4>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce feugiat mauris non
            libero.
        </h4>
        <div class="clear">
        </div>
        <span class="newsDate">10th March 2011</span>
        <p class="widgetTexSummary">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce feugiat ...</p>
</div>

и следующий jquery: 

 if ($(".widgetContent:has(.thumbNail)")){
         $('h4').css('width', '100px');
     }
     else{$('h4').css('width','195px');}

Идея заключается в том, что когда у меня есть дочерний элемент с классом thumbNail в виджете, его размер h4 внутри виджета будет динамически изменяться до 100 пикселей. Во всех остальных случаях h4 будет другого размера.

Может ли кто-нибудь помочь мне, пожалуйста?

Спасибо!

Ответы [ 3 ]

2 голосов
/ 01 августа 2011

Сначала установите ширину по умолчанию в вашем CSS. 

.widgetContent h4 {
    width: 195px;
}

Затем: 

$('.widgetContent')       // all widgets
  .has('.thumbNail')      // but only those with a thumbnail
  .find('h4')             // find the <h4> children of those
  .css('width', '100px'); // and set the style
1 голос
/ 01 августа 2011

Если я правильно прочитал ваш вопрос, вы могли бы сделать это ... 

$('.thumbNail + h4').css('fontSize','100px');

http://jsfiddle.net/jasongennaro/5Sf2B/

Это в основном выбирает любой h4 рядом с элементом с классом .thumbNail.

Вот более читаемый пример (в 25px): http://jsfiddle.net/jasongennaro/5Sf2B/1/

«Все другие случаи» должны быть рассмотрены в таблице стилей.почему вы хотите, чтобы он был таким большим, но вы идете; -)

РЕДАКТИРОВАТЬ

Возможно, я неправильно интерпретировал Q, хотя концепция та же самая.Если вы хотите изменить width h4 вместо font-size, просто сделайте это: 

$('.thumbNail + h4').css('width','100px');

http://jsfiddle.net/jasongennaro/5Sf2B/2/

1 голос
/ 01 августа 2011

Вы можете сделать: 

$(".widgetContent").each(function() {
    if ($(this).find('.thumbNail').length) {
        $(this).find('h4').css('width', '100px');
   } else {
        $(this).find('h4').css('width', '195px');
    }
});

скрипка здесь: http://jsfiddle.net/nicolapeluchetti/9jdnY/1/

...