Getting active img when stacked inside div

Question

I have a set of images that are stacked on each other and I'm trying to manipulate the one in focus (the one currently displayed on top) All the img div tags have an absolute position so they're displayed on top of each other.

My HTML looks like this:

<div id="origin" class="ui-test">
  <div class="polaroid ui-test">
      <img src="http://example.com/84655/l/72105d6f46205a948f00f6e59c299930.jpg" >
  </div>
  <div class="polaroid ui-test">
      <img src="http://example.com/77676/l/819e2093be4c61d2e21b1175f9d0f0f9.jpg" >
  </div>
  <div class="polaroid ui-test" style="left: 288.328125px; top: -8px; display: none;">
      <img src="http://example.com/47901/l/79f936ef9847793254bad21e16b2448f.jpg" >
  </div>
  <div class="polaroid ui-test" style="left: 94.328125px; top: 6px; display: none;">
      <img src="http://example.com/49761/l/6d10064d6b189c6934fd264ac295f5f8.jpg" >
  </div>
</div>

I've tried the following but it doesn't seem to work:

var currentImg= $('.polaroid:focus'); 

currentImg.animate().toggle( "drop");

It's not returning what I would expect. I'm expecting for it to return the second image down (the one currently shown)

Any thoughts what I'm doing wrong?

Answer 1

Try this:

var currentImg = $('.polaroid:visible');

http://api.jquery.com/visible-selector/ for more.

Answer 2

I ended up doing this to find the top visible div:

    var currentImg;
    $('.polaroid').each(function(){
        if ($(this).is(":visible")) {
            currentImg = this;
        }
    });

    console.log(currentImg);