Question

我有多个像这样的容器

<div class="container">
    <span>
     <!-- Inside the span is either text or img -->
    </span>
</div>

目标是仅在“.container span”包含和图像时才有边框。

我试过这样的东西..但它不起作用

if( $(this).find('.container span img').is(":visible") ){ $(".container span").css({'border':'10px'}); }

Answer 1

visible是一个伪选择器，所以它是

.is(':visible')

你也可以这样使用

$(this).find('.container span img:visible')

修改

嘿，等等，你是说它可能根本不包含图像？在这种情况下，您不希望检查可见性，而是

$(this).find('.container span img').length > 0

（当然，如果可能是图像，并且可能被隐藏，则需要检查img:visible的长度

编辑2

现在您已经检查了是否有可见图像。其余的取决于您的实施。我假设使用$(this)可以在其中搜索某种类型的DOM节点，对于.container的每个值，只有一个this。

如果情况并非如此 - 如果你想一次性查看DOM的所有 - 你可以这样做：

$('.container span img:visible').each(function() { $(this).closest('span').css('border', '10px'); });

上面，您说“对于.container内部范围内的所有可见图像，请在其父级跨度中添加边框。

另一种方法是这样的：

$('.container span').filter(function() { return $(this).find('img:visible').length > 0; }).css('border', '10px');

Answer 2

你有两个问题。首先，你的CSS是错的。你告诉它给它10px边框什么都没有。您需要指定边框的种，可能还有颜色。

其次，.is("visible")应为.is(":visible")

查看jsfiddle.net

上的工作代码

（我必须删除this选择器，但您可以将现有代码修改为上述代码。）

Answer 3

jQuery(function(){
    jQuery('.container').find('span').find('img').parents('span:first').css('boder','10px solid red');
});

http://jsfiddle.net/VMAJ7/1/

Answer 4

你有span的原因吗？您可以直接将边框应用于图像而无需span标记，特别是如果您动态加载图像并且图像具有不同的尺寸。然后，您必须确保调整span标记的大小以匹配图像的宽度和高度。您可以通过删除span标记来简化操作，否则如果所有图像都具有相同的尺寸，则需要指定范围宽度和高度。另外，不要忘记指定边框属性，例如样式和颜色。

var $cont = $('.container span');
var $cont1 = $('.container span img');
$cont.each(function() {
    $cont.has('img').css({
        'width': $cont1.width(),
        'height': $cont1.height(),
        'border': '10px solid red'
    });
});

检查http://jsfiddle.net/GnXv4/6/

处的工作示例

如果元素可见则对另一个元素执行某些操作。 jQuery的

4 个答案:

检查http://jsfiddle.net/GnXv4/6/