Question

I have to append, some text to another field when a image is clicked. I’ve got the image to appear in “the other div” but the text won’t follow.

My HTML is like this:

<div class='smallImg'><img alt='En beskrivelse' class='smallImgImg' src='flot.jpg'></div>

<div class='smallImgDesc'>        
    <span style='font-size:10px;'>
        Here should the description be..
    </span>
</div>


<div id='bigImg'>Image appears here</div>
<div id='bigImgText'>her skal beskrivelsen komme</div>

And JS:

$('.smallImgImg').click(function(){

    var smallImgText = $(this).next('.smallImgDesc');

    $('#bigImg').empty().append($(this).clone());
    $('#bigImgText').empty().append($(smallImgText).clone());

});

So, when I’m clicking on an image (.smallImgImg) it’s showing it in the #bigImg div, which works. Then I would like to add the description below the #bigImg. But it seems I cant catch the .smallImgDesc, because #bigImgText just turn empty.

I have tried to do this too:

var smallImgText = $(this).find('.smallImgDesc');

… and now it won’t work, I have no idea of what to do now. I hoped that someone could help me out here 🙂

Answer 1

The selector is wrong. You have to select the element after the parent:

var smallImgText = $(this).parent().next('.smallImgDesc');

I’ve also removed the $ wrapper around smallImgText, because it’s absolutely unnecessary to wrap a jQuery object in another jQuery object. To avoid such confusion, you can prefix all jQuery object variables with $, which is the convention.

Demo: http://jsfiddle.net/kgH3K/