jquery - 根据另一个 div 中的元素更改一个 div 的 CSS 属性

标签 jquery html css dom jquery-selectors

如果右侧 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' });

但我不确定如何为上述 senario 执行此操作。

感谢任何帮助

更新

实现此目的的 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/

最佳答案

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

JS

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

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

关于jquery - 根据另一个 div 中的元素更改一个 div 的 CSS 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20072962/

相关文章:

javascript - jquery脏记录,想要jquery ui模式

javascript - 如何使用 jquery/javascript 在 html 选择选项中填充 javascript 对象值的数据

javascript - 为什么在正确更新标签文本的单击事件后按钮本身不可见

jquery - IE9 jquery动画问题,

JavaScript 更好地练习事件监听器或函数

javascript - html 选择标记从选中的复选框更改

html - 我的主页和关于链接是否超链接到正确的页面?

html - SVG 半圆 : Why is it rotated?

CSS 属性选择器 : How can I style parent element but use attribute of child element?

html - 使用 CSS 选择器更改 SVG 填充的颜色/样式