根据图像的src属性向父级添加类

我遇到了一个问题，即CMS正在根据模板吐出图像网格，但是如果项目的图像比网格少，则会将空白吐出好。所以我想添加一个到父元素的类来隐藏基于空白图像src属性的空白。以下是我有：根据图像的src属性向父级添加类

HTML

<div class="item"> 
    <a href="#"> 
    <img src="image-1.jpg"> 
    </a> 
</div> 
<div class="item"> <!-- Need to add class of 'hide' --> 
    <a href="#"> 
    <img src=""> <!-- Blank Img --> 
    </a> 
</div>

jQuery的

var image = $("div.item > a > img"); 
var srcs = image.attr('src'); 

$.each(image, function() { 
    if(srcs.length == 0){ 
     $(this).closest('div').addClass("hide"); 
    } 
});

因为我在这是一个有点小白，它可能简单的东西。预先感谢您提供的任何帮助！

来源

2013-02-18 Archetype

只需使用：

$('img[src=""]').parents ('div.item').hide()

说明：选择找到空的源和家长方法的返回paretns所有IMG元素给出选择器，并最终隐藏与actuallu隐藏div.item选择器。

$('img[src=""]').closest ('div.item').hide()

来源

2013-02-18 20:03:03 Boynux

在这种情况下，'.closest'比'.parents'更好。 – 2013-02-18 20:05:02

我不这么认为。我用item类过滤了div，所以这不是问题。但是，最接近的将会完美地工作。把它留到@Archetype和context – Boynux 2013-02-18 20:06:58

那么'.parents'将会不必要地遍历DOM，即使它找到第一个'div.item'元素。避免不必要的计算会更好，不是吗？而且由于OP已经在使用它，我会保留它。 – 2013-02-18 20:09:55

image.attr('src')将始终返回src属性值第一个选定元素。

您想要测试每个元素的属性值。您可以使用.filter^[docs]轻松地做到这一点：

$('div.item > a > img').filter(function() { 
    return $(this).attr('src').length === 0; 
}).closest('div.item').addClass('hide');

或者使用attribute equals selector ^[docs]：

$('div.item > a > img[src=""]').closest('div.item').addClass('hide');

来源

2013-02-18 19:58:01

使用.attr("src")将返回src属性。

我会使用each jQuery功能为img。

$("img").each(function() { 
    if($(this).attr("src") == "") { 
     $(this).closest('div').addClass("hide").text("Hide class was added."); 
    } 
});

查看演示here。

你可以看到屏幕拍摄波纹管。

我用下面的CSS样式.hide：

.hide { 
    background: lightblue; 
}

enter image description here

来源

2013-02-18 20:01:42

感谢约翰：关于什么@Felix表明，这是更efficeint

！我使用了这个，最终离开了addClass，只是使用.remove来清理它。 – Archetype 2013-02-18 21:11:55

我修改您的代码版本，这样你就可以从中吸取教训。您还将学习如何使用$ .each（）。

var image = $("div.item > a > img"); 

$.each(image, function (idx, element) { 
    if($(element).attr('src').length == 0){ 
     $(this).closest('div').addClass("hide"); 
     // remove 
     $(this).closest('div').hide(); 
    } 
});

您可以拨弄它玩

http://jsfiddle.net/r84NR/

来源

2013-02-18 20:01:46

LIVE DEMO

$('img[src=""]').closest('.item').hide();

另外的代替.hide()可以使用.remove()

来源

2013-02-18 20:07:16

根据图像的src属性向父级添加类

回答

相关问题