如果父 div 包含 X 类的子 div，如何动态更改 hX 标签的大小

Question

我在使用 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 的大小都会不同。

谁能帮帮我？

谢谢！

Answer 1

首先，在 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

Answer 2

你可以这样做：

$(".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/

Answer 3

如果我没看错你的问题，你可以这样做...

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

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

这基本上选择了类.thumbNail的元素旁边的任何h4。

这是一个更易读的例子（25px）：http://jsfiddle.net/jasongennaro/5Sf2B/1/

“所有其他情况”应在样式表中处理。

不知道你为什么想要那么大，但你去吧;-)

编辑

我可能对 Q 的解释有误，尽管概念是相同的。如果您想更改h4 的width 而不是font-size，那么只需这样做：

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

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