Javascript : Check is empty generate by for loop and if true do something

Question

For instance we have something like below, which is generate brunch of img with different src :

//the for loop is not important but just giving you some idea

    for(i=0;i<100;i++){
      <img class="emptyPic result-image" src="{{picURL}}"/>
     }

and I'd like to check every img onload, if it's src is empty like <img src=""/>, i would like to do something, but in the example just make it display:none first. So i tried something like below with JQuery.

if($(this + ".result-image").attr('src')){
  ($(this + ".result-image").css("display","none")
}

i had put the if statmenet above into the for loop already and it should do the job but what is it not working?

Why not just use CSS? Something like: img[src = ''] {display:none;} — sideroxylon, May 30 '16 at 02:09
You could hide the broken images, but Id say the right way would be to not create them in the first place which it sounds like you started to do *"i had put the if statmenet above into the for loop already and it should do the job but what is it not working?"* , What framework are you using? Angular or something judging by the `{{}}`? — Wesley Smith, May 30 '16 at 02:37
Handlebar.js , i didn't make the decision, i would not create those img with broken link or empty src, but i am not the one in charge of the back-end system — Anson Aştepta, May 30 '16 at 03:25

score 2 · Accepted Answer · answered May 30 '16 at 02:26

2

You can use pure CSS:

img[src = ''] {display:none;}

answered May 30 '16 at 02:26

sideroxylon

4,338
1
22
40

score 1 · Answer 2 · edited May 23 '17 at 11:58

If you want to check if img src is empty and want to do something...This may help;

HTML:

<!DOCTYPE html>
<html>
<body>
<img src="" class="image">

</body>
</html>

Javascript:

$(document).ready(function(){
   if($('.image').attr('src') == '') { 
      alert('got me'); 
    }
});

If you want to check if it is empty....This may help

HTML:

<!DOCTYPE html>
<html>
<body>
<img src="" class="image">

</body>
</html>

JAVASCRIPT:

if ($('.image').is(':empty')){
  alert("hi")
}

SOURCE:

How do I check if an HTML element is empty using jQuery?

Hope this helps

Javascript : Check is empty generate by for loop and if true do something

2 Answers2