if the image contains NO src then i want to hide the 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>

To do this i used:

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

however if you put a src path into the image the jquery still hides div.PageHeaderDescription which is wrong. It needs to be visable if there is an image src.

Here is my example: /

if the image contains NO src then i want to hide the 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>

To do this i used:

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

however if you put a src path into the image the jquery still hides div.PageHeaderDescription which is wrong. It needs to be visable if there is an image src.

Here is my example: http://jsfiddle/dfasd/1/

• javascript
• jquery

5 Answers 5

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

Find img with empty src and hide its parent div.PageHeaderDescription;

DEMO

OR

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

Hide this div.PageHeaderDescription which has img with empty src.

DEMO

filter() returns a jQuery object, which is always truthy, whether or not elements were matched.

What you should be doing instead is checking the lengthproperty of the object returned;

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

Although you could shorten this to;

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

But if you have multiple div.PageHeaderDescription on the page, you should be doing;

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

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

If you want to do that when page loads, you can use this code:

$("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

Or you can run the same script every time you want to check if any img with no src is in page and must be hidden.

No need to make it more plicated than it needs to be with a .filter().

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

​

I check to see if the img doesn't have the src attribute or if it does have the attribute I check if it is blank.

Fiddle: http://jsfiddle/iambriansreed/G6bPu/

As already said, a jQuery object always evaluates to true. But you don't need an if statement at all, simply reduce the set of elements to those that have an "empty" image. That's what .filter() is there for:

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