当前位置：文江博客话题详情

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

发布于 2024-10-20 19:03:35 字数 381 浏览 5 评论 0 原文

我有多个像这样的容器

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

原文

I have multiple containers like this

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

Goal is to have border around ".container span" only if it contains and image.

i tried something like this.. but it doesnt work

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

忆伤 2024-10-27 19:03:35

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

visible is a pseudo selector so it's

.is(':visible')

You can also use it like so

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

EDIT

Hey, wait, are you saying that it might not contain an image at all? In that case, you don't want to be checking for visibility, but rather something like

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

(of course, if there might be images, and they might be hidden, you want to check the length of img:visible)

EDIT 2

Now you've got a working check as to whether or not there is a visible image. The rest depends on your implementation. I assumed from the use of $(this) that there will be a DOM node of some kind to search within, that'll only have one .container for each value of this.

If that's not the case - if you want to look at all of the DOM in one go - you could go about something like this:

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

Above, you're saying that "for all visible images inside a span inside a .container, add a border to their parent spans.

Another way of doing it would be something like this:

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

回复收藏 0 原文

○闲身 2024-10-27 19:03:35

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

其次， .is("visible") 应该是 .is(":visible")

查看 jsfiddle.net

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

回复收藏 0 原文

无可置疑 2024-10-27 19:03:35

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

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

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

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

回复收藏 0 原文

去了角落 2024-10-27 19:03:35

您拥有 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/

Is there a reason why you have the span. You can apply the border directly to the image without the need for a span tag, specially if you are loading your images dynamically and your images have different dimensions. You then have to ensure your span tag is resized to match your image width and height. You can simplify things by getting rid of the span tag, else if all your images have same dimensions, you need to specify your span width and height. Also don't forget to specify your border properties such as style and color.

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