【问题标题】:Change CSS property of one div based on element in another div根据另一个 div 中的元素更改一个 div 的 CSS 属性
【发布时间】:2013-12-03 02:08:34
【问题描述】:

如果右div不包含图像,我需要更改左div的css属性。

<div class="wrapper">
    <div class="pg-left-bar"></div>
    <div class="pg-right-bar">
        <img src="img.jpg">
    </div>
</div>

http://jsfiddle.net/paycb/1/

如果右 div 没有图像,那么左 div 宽度应更改为 100%,并从左 div 中删除边距,并将右 div 的显示属性更改为none

只有当我在同一个 div 中查找元素时,我才知道如何使用 jquery 更改 css 属性

$('.pg-right-bar').has('img').css({ 'background-color': '#fff' });

但我不确定如何为上述情景做到这一点。

感谢任何帮助

更新

实现此目的的 Jquery 代码

if ( $('.pg-right-bar').has('img').length > 0 )
{
    $('.pg-left-bar').css({ 'background-color': '#ccc' });

}
else
{
     $('.pg-left-bar').css({ 'margin-right': '0px' });
     $('.pg-left-bar').css({ 'width': '100%' });
     $('.pg-right-bar').css({ 'display': 'none' });
}

http://jsfiddle.net/paycb/4/

【问题讨论】:

    标签: jquery html css dom jquery-selectors


    【解决方案1】:

    示例
    http://jsfiddle.net/paycb/2/

    JS

    if ( $('.pg-right-bar').has('img').length > 0 )
        $('.pg-left-bar').css({ 'background-color': '#fff' });
    

    jQuery 选择器限制了被选元素的数量。如果没有可用的img-tag,则在这种情况下使用has() 会将对象计数限制为0。 据我所知,这种情况不能用纯 CSS 解决。我给你举了一个 JS 的例子。

    【讨论】:

    • 我是根据你的回复jsfiddle.net/paycb/4做的,请检查这个方法是否正确。
    • 对我来说看起来和工作都很好。我提供了一个示例,毫无疑问您可以编写 else 部分 :-)
    猜你喜欢
    • 1970-01-01
    • 2023-03-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-05-19
    • 2022-01-25
    • 1970-01-01
    相关资源
    最近更新 更多