display none when no images in jquery

Question

I'm using jquery get the src of images to display:none when src="". It looks like that,

<div class="parent">
  <img src="images_path/or nothing" class="Images"/>
  <div class="content">
  </div>
</div>

class content float left to fit with images width in parent div. Now I want detect image source when it empty I changed class content.width to fit with parent div by its selft. My jquery code like that

 var CustomizeImage = $(".CategoryNews-left").find(".Images").attr("src");
    alert(CustomizeImage);
    if(CustomizeImage == "")
    { alert("ko co gi");
     $(".CategoryNews-left").find(".Images").css("display","none");
     $(".CategoryNews-left").find(".news").css("width","320px");
     $(".CategoryNews-left").find(".Content").css("width","320px");
    }

But class content does not get new width even src=empty, someone help me to fix this truoble, thank alot of read my note!!!

Answer 1

Try lowercasing “.Content” (change to “.content”) in the script. Cause in HTML you have just class="content".

Answer 2

Since class names are case-sensitive in CSS, .Content doesn't match class="content"

Either change the class to class="Content" in the HTML (which seems to be your naming convention anyway), or the selector to .content.

Answer 3

thanks Tobias and Birman alot, I've just check out my class name in css file is Content. and I mean I have s list of parent div. But my code just alert the first one when I code like that:

var CustomizeImage = $(".CategoryNews-left").find(".Images").attr("src");
alert(CustomizeImage);
if(CustomizeImage == "")
{   alert("ko co gi");
    $(".CategoryNews-left").find(".Images").css("display","none");
    $(".CategoryNews-left").find(".news").css("width","320px");
    $(".CategoryNews-left").find(".Content").css("width","320px");
}
else
{
        if(CustomizeImage.indexOf('src=""') > 0)
    { alert("co nhung rong");
     $(".CategoryNews-left").find(".Images").css("display","none");
     $(".CategoryNews-left").find(".news").css("width","320px");
     $(".CategoryNews-left").find(".Content").css("width","320px");
    }
}

and my html code look like that

<div class="CategoryNews-left">
<div class="Images">
<img src="images/Anhto_listtin_trai.gif" alt="anh tin" />
</div>
<div class="news">
<h3>blahblahblahblahblah</h3>
<p>blahblah- blahblahblah</p>
</div>
<div class="Content">
blahblahblahblahblahblah
</div>
<div class="relateNews">
<ul>
<li><a href="">blahblahblahblahblahblahblahblahblahblah</a> <font>VnExpress</font></li>
</ul>

Answer 4

Not exactly sure what you're trying to do, but your first selection is wrong.

$(".CategoryNews-left").find(".Images").attr("src");

Finds the div "images", and looks for its src. The div has no src. You should try

$(".CategoryNews-left .Images img").attr("src");

Also, keep in mind attr("src") will only return the src of the first img, even if you have many.

Answer 5

thanks Kobi and the other alot! Now I know if I want to have their attributes I must get the loop throught all element. And now it run. Thanks a lot again!