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

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 这个。

如果情况并非如此 - 如果您想一次性查看所有 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');