...">
Have Geek Brain

No display if there are no images in jquery

I am using jquery to display src of images: none when src = "". Looks like,

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

the contents of the float class stayed in line with the width of the images in the parent div. Now I want to detect the image source when it is empty. I changed the content.width class to match the parent div of its selft. My jquery code like this

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 the content of the class doesn't get the new width, not even src = empty, someone helps me fix this trick, thanks for reading my note !!!

0


a source to share


5 answers


Try decreasing ".Content" (change to ".content") in your script. The reason is in HTML you only have class = "content".



0


a source


Since class names are case sensitive in CSS, it .Content

doesn't matchclass="content"



Either change the class to class="content"

in HTML (which is similar to your naming convention anyway) or the selector to .Content

.

0


a source


Thanks to Tobias and Birman, I just checked that my class name in the css file is Content. and I mean I have a list of parent divs. But my code just warns about the first one when I code like this:

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 looks like this:

<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>

0


a source


Not really sure what you are trying to do, but your first choice is wrong.

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

Finds the "image" div and searches for it src

. Div doesn't have src. You must try

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

Also, keep in mind that attr("src")

only the src of the first img will return, even if you have a lot of them.

0


a source


thanks Kobe and the other a lot! Now I know if I want to have my attributes, I have to get a loop through the whole element. And now it runs. Thanks again!

0


a source






More articles:


All Articles