CODEWITHSUNDEEP
javascriptjquery
SOLDIER-OF-FORTUNE
SOLDIER-OF-FORTUNE

Reputation: 1654

jquery filter image src issues

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.net/dfasd/1/

Upvotes: 0

Views: 2223

Answers (5)

iambriansreed
iambriansreed

Reputation: 22241

No need to make it more complicated 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.net/iambriansreed/G6bPu/

Upvotes: 1

thecodeparadox
thecodeparadox

Reputation: 87073

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

Upvotes: 4

Marcelo De Zen
Marcelo De Zen

Reputation: 9497

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.

Upvotes: 2

Felix Kling
Felix Kling

Reputation: 816374

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

Upvotes: 0

Matt
Matt

Reputation: 75317

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

Upvotes: 3

Related Questions