Man tenta algo assim:
<figure class="catImag">
<img src="" alt="">
</figure>
<figure class="catImag">
<img src="" alt="">
</figure>
<figure class="catImag">
<img src="" alt="">
</figure>
E esta é o meu jQuery com evento click.
var imageObject = [
{
src: 'cat01.jpg',
alt: 'Cat 01',
count: 0,
},
{
src: 'cat02.jpg',
alt: 'Cat 02',
count: 0,
},
{
src: 'cat03.jpg',
alt: 'Cat 03',
count: 0,
},
];
$('.catImag img').each(function(i, el) {
$(this).attr(
{
'src': imageObject[i].src,
'alt': imageObject[i].alt,
'data-count': imageObject[i].count
}
);
$(this).after('<figcaption>' + imageObject[i].alt + '</figcaption>');
$(this).after('<span></span>');
})
$('.catImag ').click(function(){
var countIni = $(this).children('img').attr('data-count');
$(this).children('span').text(countIni = parseInt(countIni, 10) + 1);
$(this).children('img').attr('data-count',countIni)
console.log($(this).children('span'));
})
Ficou meio ruim aqui não manjo publicar as paradas aqui ainda.. Fiz um exemplo: inserir a descrição do link aqui