loops - jQuery Looping and Attaching Click Events

Question

Okay I've tried multiple things and looked for answers to this and I can't seem to get it to work. What I'm trying to do is there are some dynamically generated images, so I don't know how many images there will be at any time. Each image has some associated information that I store in a seperate div. What I want to do is attach a click event to each image that will unhide the div that has the associated content in it.

I've tried looping with both a for loop and a while loop, to no avail. What happens in both is they attach the click event fine, but no matter the image clicked on, the same div always opens, no the div associated with the image.

var cnt = jQuery('#container img').length;
   cnt = cnt - 1;
   var i = 0
   for(i=0; i<=cnt; i++) {
       jQuery('#container img').eq(i).click(function() {
           jQuery('.movie' + 1).slideDown();
           jQuery('#sort').hide();
       });
   }


while(i<=cnt) {
jQuery('#container img').eq(i).click(function() {
       jQuery('.movie' + i).slideDown();
       jQuery('#sort').hide();
    });
i++

}

Above is the two different variations I've tried. The second doesn't have the variables defined on here but in my code they do. What I'm doing is getting a count of how many images I have (var cnt) and then using that to loop through the correct number of times. I'm assuming something must be getting messed up in the click function, as it attaches it to each image fine but gets the wrong div.

EDIT:

As per some comments, I tried changing my structure to be something like this:

<div id="container">
  <img />
  <img />
  <div class="expanded">
     // Info Goes Here
  </div>
  <div class="expanded">
     // Info Goes Here
  </div>
</div>

I then tried the code:

jQuery(document).ready(function() {
   jQuery('#container img').click(function () {
       jQuery(this).next('div.expanded').show();
   });
});

But it doesn't work either. The first image does nothing and the second shows the wrong div.

Answer 1

You're probably overworking this significantly. Assuming a regular structure with something like this:

<div id="container">
  <img />
  <div class="info">
  <img />
  <div class="info">
  <img />
  <div class="info">
</div>

You could get all of them at once with ... something like this:

$('#container img').click(function () {
  $(this).next('div').show();
});

In order to know for sure how to structure the function body in the click handler we need to see full markup, but that should come way closer, way easier.

To encompass comments / questions - we're using .next('div') which finds the closest sibling after the element referred to by $(this). For that to work, the images need to alternate with the info divs. Otherwise you need some sort of numbering system that you can refer back to. I've updated my example a bit. Let me know if that helps.

As an alternative if we're working with a numbering system:

<div id="container">
  <img class="group1" />
  <img class="group2" />
  <img class="group3" />
  <div class="group1" />
  <div class="group2" />
  <div class="group3" />
</div>

With the following adjustments to the JavaScript:

$('#container img').click(function () {
  var $this = $(this);

  $this.next('div.' + $this.attr('class')).show();
});

That should come really close for you. You'll notice that the image and the div share a class that's numbered as a way to relate them to each other.