JSFiddle - React, Tailwind, and code Playground

by wirey00

HTML

<body>
<div>
<img class="myimg" src="images/carthumb.jpg"/><div id="indicator"></div>
</div>

<div>
<img class="myimg" src="images/plus.gif"/><div id="indicator"></div>
</div>
<div>
<img class="myimg" src="images/carthumb.jpg"/><div id="indicator"></div>
</div>

</body>

CSS

.isjpg{background-image:url('images/jpg.gif');}
.isgif{background-image:url('images/gif.gif');}

#indicator{width:100px;height:100px;border:solid;border-width:1px;}

JavaScript

$(document).ready(function() {
    $("body > div").each(function() {
        var fileName = $(this).find('.myimg').attr('src');        
        var fileExtension = fileName.substring(fileName.lastIndexOf('.'));
        $(this).find('div').addClass('is'+fileExtension.split('.')[1]);        
    });
});