2

我有多个这样的容器

<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'}); }
4

4 回答 4

3

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');
});

上面，您是说“对于 a 内跨度内的所有可见图像.container，为其父跨度添加边框。

另一种方法是这样的：

$('.container span').filter(function() { return $(this).find('img:visible').length > 0; }).css('border', '10px');
于 2011-03-04T07:34:22.043 回答
1

你有两个问题。首先，你的 css 是错误的。你告诉它给它一个 10px 的边框。您需要指定什么样的边框和可能的颜色。

二、.is("visible")应该.is(":visible")

查看jsfiddle.net上的工作代码

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

于 2011-03-04T07:45:43.347 回答
0 
jQuery(function(){
    jQuery('.container').find('span').find('img').parents('span:first').css('boder','10px solid red');
});

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

于 2011-03-04T07:39:13.777 回答
0

你有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/检查工作示例

于 2011-03-04T07:47:29.593 回答