Jquery .children and .each usage

0
votes

OK, I have been able to get this working using the following:

$('.jcaption').hover(function() { $('.caption', this).stop(false, true).animate({bottom:0},{duration:250, easing: style}); $('.jcaption').hover(function() { $('.caption', this).stop(false, true).animate({bottom:-100},{duration:250, easing: style}); })

using the following html:

div class="photo" img src="" div class="caption" span-caption goes here/span-/div-/div>

The problem that I'm having now is that I have to follow this same HTML structure for each image caption. Is there a way to consolidate this where I could just list several images under the div class photo instead of having to list each separately?

I'm using this code:

$('.photo').hover(function() {
    $(this).children()
        .stop(false,true)
        .animate({bottom:-50},{duration:200, easing: style});

to animate an image caption, and want to apply the effect to every image with the class .photo. As the code currently is, it applies the effect only to the first .photo class, and if any more image captions are added with this class, it just overlaps them on the first one.

Here is the corresponding html:

div class="photo" img src="" div class="caption" span-caption goes here/span-/div-/div>

2
jquery
If .photo is an image, then it can't have children, so $(this).children() should be empty. HTML code please! – Šime Vidas
Also, you're missing }); at the end of your code block above... – Šime Vidas
sorry about that, maybe this will help. <div class="photo"> <img src="" /> <div class="caption"><span>caption goes here.</span></div> </div> – user1031508
@user1031508: Maybe you should add that to the question – Eric
If all your images are childs of divs with class="photo" you should use $(".photo > img") to get at them. – flesk

2 Answers

0
votes

What's the problem?

All the images animate when you hover over them.

0
votes

You could use

$('.photo > img').each(function(index, element) {
    $(element).hover(function() {
        $(this).stop(false,true).animate({bottom:-50},{duration:200, easing: style});
    });
});

, but there's no need to use each with selectors, unless you want to handle some of the returned elements specifically:

$('.photo > img').hover(function() {
    $(this).stop(false,true).animate({bottom:-50},{duration:200, easing: style});
});

EDIT: To clarify, like Šime wrote, drop children() since image tags can't have them, and it's probably not what you intended.

EDIT 2: Changed to reflect new information provided in comments to original question.