Question

I have a single page site that utilizes tabs – It previously had one gallery. I am now adding 3 and trying to limit the duplicate jquery I write. It worked fine when I specifically had a selector based on the id for the IMG that is now trying to be referenced via .img-main selector. I have tried both prevAll() & closest() and neither are working for me. Any ideas on why I am so fail on this one?

Here is the markup.

<div id="refinish-main"> <img src="images/refinish-0.jpg" class="img-main" alt="refinish-0" width="600" height="450"/> </div>
<ul id="refinish-thumbs" class="thumbs">
  <li><a href="images/refinish-3.jpg"><img src="images/refinish-3_tn.jpg" name="refinish-3" alt="3" width="85" height="60"/></a></li>
  <li><a href="images/refinish-2.jpg"><img src="images/refinish-2_tn.jpg" name="refinish-2" alt="2" width="85" height="60"/></a></li>
  <li><a href="images/refinish-1.jpg"><img src="images/refinish-1_tn.jpg" name="refinish-1" alt="1" width="85" height="60"/></a></li>
</ul>

Here is the jQuery:

//Swap Image on Click
$(".thumbs li a").click(function() {
        var mainImage = $(this).attr("href"); //Find Image Name
    $(".thumbs").closest("img.img-main").fadeOut("fast" , function(){
    $(this).attr('src', mainImage).one("load",function(){ 
            $(this).fadeIn("slow");
      });
    });
    return false;       

Thanks in advance for looking!

Answer 1

When traversing up the DOM, closest does not traverse child elements. You can use

$(this).closest('ul').prev().find('.img-main')