jquery - 如果其他子 div 不存在，jQuery 使子 div 更大

Question

我的 HTML 结构看起来像这样

<div class="container">
    <div class="image"><img /></div>
    <div class="title_body">
        <div class="title">Title</div>
        <div class="body">Body text</div>
    </div>
</div>

图像在图像的左侧，标题+正文在图像的右侧。

如果图像不存在，我想要做的是使 title_body div 100% 宽度。有很多 .container，我只想在缺少 .image 的容器中使 div 100%

Answer 1

如果（正如你的标题所暗示的）jQuery 是一个替代方案，你可以简单地做$('div.container:has(div.image)').addClass('has-img')，然后风格div.container.has-img不同于div.container.

Answer 2

如果这真的是您想要的，您可以检查长度以查看 img 是否存在，如果您有多个，请尝试使用each()

 if(!($(element).length)){ // if the element not exist
   // do something
 }

这是一个现场演示

---

编辑：

这是一个使用 的示例each()，如果您有多个：

$(".image").each(function(){
   if(!($(this).children().length)){ // if img not exits
       $(this).next().width("100%");
   }
});

现场演示

---

编辑：检查 div image：

现场演示 2

Answer 3

$('.container:has(.title_body)').not(function() {
    return $(this).has('.image').length;
}).css('width', '100%');

您可以添加一个执行此操作的类，而不是通过 jQuery 手动设置宽度。

Answer 4

$('.container').each(function(){
    if ($(this).has('.image').length == 0) {
        $(this).children('.title_body:first').css('width', '100%');
    }
});​

检查jsFiddle上的示例