javascript - How to Check with jQuery if Image URL is Empty and Do something? - Stack Overflow

admin管理员组

文章数量:1410724

I am loading XML feed from another site with PHP. My output in HTML is like this:

<div class="sponsored">
<div class='box'><img src='http:///xxx.jpg'><a href='xxx'>Title</a></div> 
<div class='box'><img src='http:///xxx.jpg'><a href='xxx'>Title</a></div>
<div class='box'><img src='http:///xxx.jpg'><a href='xxx/'>Title</a></div>
<div class='box'><img src=''><a href='xxx'>Title</a></div>   
</div>

The last part has no src url, meaning the feed didn't provide any image. I would like to check this HTML output with jquery to check if there's no src url. and if so, then put defauly image for better formatting.

I saw jquery scripts that check for images within div. But is there a way to check if images src is empty or not?

================

UPDATE:

Ok, I'm not sure why it didn't work before. Finally the code below works on my end:

$(".sponsored > .box > img[src='']").attr("src","default.png");

Thank You All for Answers!! Here's final working code for future noobs like me :)

<script>
$(document).ready(function(){
$(".sponsored > .box > img[src='']").attr("src","image.jpg");
});
</script>

I am loading XML feed from another site with PHP. My output in HTML is like this:

<div class="sponsored">
<div class='box'><img src='http:///xxx.jpg'><a href='xxx'>Title</a></div> 
<div class='box'><img src='http:///xxx.jpg'><a href='xxx'>Title</a></div>
<div class='box'><img src='http:///xxx.jpg'><a href='xxx/'>Title</a></div>
<div class='box'><img src=''><a href='xxx'>Title</a></div>   
</div>

The last part has no src url, meaning the feed didn't provide any image. I would like to check this HTML output with jquery to check if there's no src url. and if so, then put defauly image for better formatting.

I saw jquery scripts that check for images within div. But is there a way to check if images src is empty or not?

================

UPDATE:

Ok, I'm not sure why it didn't work before. Finally the code below works on my end:

$(".sponsored > .box > img[src='']").attr("src","default.png");

Thank You All for Answers!! Here's final working code for future noobs like me :)

<script>
$(document).ready(function(){
$(".sponsored > .box > img[src='']").attr("src","image.jpg");
});
</script>

• javascript
• php
• jquery
• html

Share Improve this question Follow edited Mar 9, 2016 at 12:21 reizer asked Mar 9, 2016 at 11:46 reizerreizer 25311 gold badge44 silver badges1212 bronze badges 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

You can do it with attribute equals selector,

$(".sponsored > .box > img[src='']").attr("src","default.png");

$(document).ready(function(){
    $(".sponsored .box img").each(function(){
        if($(this).attr('src') == ''){
            $(this).attr('src') = 'default.png';
        }
    });
});

You can use like that, this example will give you 3 not empty records and 1 empty record, you can check the result in browser console:

$('.box img').each(function(index,val){
    if($(this).attr('src') == ''){
      console.log('empty');
    }
    else{
     console.log('not empty');
    }
  });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sponsored">
<div class='box'><img src='http:///xxx.jpg'><a href='xxx'>Title</a></div> 
<div class='box'><img src='http:///xxx.jpg'><a href='xxx'>Title</a></div>
<div class='box'><img src='http:///xxx.jpg'><a href='xxx/'>Title</a></div>
<div class='box'><img src=''><a href='xxx'>Title</a></div>   
</div>

try this

$('.box img').each(function(){
if($(this).attr('src') == ''){
  //do something
}
else{
  //do something
}
});

$('.sponsored .box img').each(function () {
    if (this.src!== undefined && this.src!='') {
        console.log("Exists");
    }else
    {
        console.log("Not Exists");
    }
});

本文标签： javascriptHow to Check with jQuery if Image URL is Empty and Do somethingStack Overflow