Problems With Jq Image Selector

I had a similar problem here: jQuery function for specific class which I solved. But it bugged me because it has too many divs and it does not look very nice, so I rewrote my HTML

Solution 1:

your code that you pasted is maligned, you have an extra }); at the end.

In addition, you are wrapping the $('.colorwrap a') selector within your .each function loop, I'm not sure if you meant that.

Further, you have missed a bit on scoping your this variable.

this line within your each is fine.

$(this).find('.cipela-bg img:eq(0)').fadeIn(500);

but then you instantiate a click handler

$('.colorwrap a').click(function(){
  var index = $(this).find(".colorwrap a").index(this);

the $(this) within that handler refers to the matched a within .colorwrap. You are then finding another instance of .colorwrap a underneath that, which probably doesnt exist, hence your selector not finding anything.

If you do indeed intend on wrapping this click handler on each .each iteration, you should assign $(this) to a variable within your loop, and use it within the click handler like this

var picture = $('.post-cipela').each(function(index, element) {
    var that =$(this);
    that.find('.cipela-bg img:eq(0)').fadeIn(500);

    $('.colorwrap a').click(function(){
        var index = that.find(".colorwrap a").index(this);
        $('.cipela-bg img').fadeOut(200);
        $('.cipela-bg img:eq('+index+')').fadeIn(500);
    });
});