jQuery - select class except specific child

Question

I'm using the photo slider code from here: http://tympanus.net/codrops/2010/10/07/slider-gallery/ and trying to modify it so that the link below the images loads up in a new window.

For example:

<div class="content">
<div><a href="#"><img src="http://imageurl" alt="largeimageurl" /></a></div>
<div class="caption"><a target="_blank" href="image.php?id=someid&svc=somesvc" rel="nofollow">More Info</a></div>
</div>

I've tried a variety of different things with the javascript file, which currently reads:

$fp_content_wrapper.find('.content').bind('click',function(e){
    var $current = $(this);
    //track the current one
    current = $current.index();
    //center and show this image
    //the second parameter set to true means we want to
    //display the picture after the image is centered on the screen
    centerImage($current,true,600);
    e.preventDefault();
    });

What I need to do is alter that first line so that it selects as normal, but doesn't apply anything to the caption div, which has the link in, so that it behaves as normal.

I know there's similar questions on SO, but I have tried most of the suggested ones. I don't have much experience with JS at all, so it could easily be me doing it wrong.

Appreciate any help!

Answer 1

Try this:

$fp_content_wrapper.find('.content>*:not(.caption)').bind('click',function(e) .....

What was happening is that you were selecting the content tag, instead you wanted to select what was inside it, except for anything with the .csption class. '>' means element directly below and '*' means select all. So what it translates to is "select everything directly below .content that is not a class of .caption".

If you continue using jquery it's worth while studying the selectors.

Good luck

Answer 2

尝试：

$fp_content_wrapper.find('.content:not(.caption)').bind("click", ...

Answer 3

Try this James

$fp_content_wrapper.find('.content').bind('click',function(e){     
   if(!$(this).attr('class'))   
   {
     var $current = $(this);     
     //track the current one     
     current = $current.index();     
     //center and show this image     
     //the second parameter set to true means we want to     
     //display the picture after the image is centered on the screen     
     centerImage($current,true,600);     
     e.preventDefault();  
   }
}); 

There is a neater way to do this but this should do. This should make sure that that only the div that doesn't have a class runs the function. Obviously be careful or change the logic if you want to use a class on the other div.

Cheers

EDIT:

After looking over your code again you could also test the hyperlink within the div to check whether it has an alt attribute or what the alt attribute is. This will be a more specific test.