javascript - jquery过滤图像src问题

Question

如果图像不包含 src 那么我想隐藏div.PageHeaderDescription

<div class="PageHeaderDescription">
  <h1>Bistro 300</h1>
    <img border="0" src="images/Category/large/469.jpg" id="EntityPic621">
    This is some text
</div>

为此，我使用了：

if ($("div.PageHeaderDescription img").filter("[src='']")) {
    $("div.PageHeaderDescription").hide();
}

但是，如果您将 src 路径放入图像中，jquery 仍然会隐藏div.PageHeaderDescription，这是错误的。如果有图像 src，它需要是可见的。

这是我的例子：http: //jsfiddle.net/dfasd/1/

Answer 1

$("div.PageHeaderDescription img[src='']").parent().hide();

img用空查找src并隐藏其父级div.PageHeaderDescription；

演示

或者

$("div.PageHeaderDescription").has("img[src='']").hide();

用 empty隐藏div.PageHeaderDescription这个。imgsrc

演示

Answer 2

filter()返回一个 jQuery 对象，无论元素是否匹配，它总是真实的。

你应该做的是检查length返回对象的属性；

if ($("div.PageHeaderDescription img").filter("[src='']").length) {
    $("div.PageHeaderDescription").hide();
}

尽管您可以将其缩短为；

if ($("div.PageHeaderDescription img[src='']").length) {
    $("div.PageHeaderDescription").hide();
}

但是，如果div.PageHeaderDescription页面上有多个，则应该这样做；

$("div.PageHeaderDescription").each(function () {
    var self = $(this);

    if (self.find('img[src=""]').length) {
        self.hide();
    }
});

Answer 3

如果您想在页面加载时执行此操作，可以使用以下代码：

$("div.PageHeaderDescription img")     // search for all img's inside a div...
   .filter("[src='']")                 // get only ones with no src
   .parents("div.PageHeaderDescription")   // get their parent elements
   .hide(); // hide then

或者，您可以在每次要检查页面中是否有任何没有 src 的 img 并且必须隐藏时运行相同的脚本。

Answer 4

无需使其比使用.filter().

var phd = $("div.PageHeaderDescription");    
if ($('img:not([src])',phd).length || $('img[src=""]',phd).length) {
    phd.hide();
}

​</p>

我检查是否img没有该src属性，或者它是否具有该属性，我检查它是否为空白。

小提琴：http: //jsfiddle.net/iambriansreed/G6bPu/

Answer 5

如前所述，一个 jQuery 对象总是计算为true. 但是您根本不需要if声明，只需将元素集减少为具有“空”图像的元素即可。这就是它的.filter()用途：

$("div.PageHeaderDescription").filter(function() {
    return $(this).find("img[src='']").length > 0;
}).hide();