CODEWITHSUNDEEP
jquery
Neros
Neros

Reputation: 1129

this parent children not working

Why doesn't this work?

HTML

<div class="gallery">
    <div class="viewport">
    <div class="wrapper">
        <img src="img/boat1.png" />
        <img src="img/boat2.png" />
    </div>
    </div>
    <a href="#" class="btn_prev">prev</a>
    <a href="#" class="btn_next">next</a>
</div>

CSS

.viewport {position: relative; height: 220px; width: 280px; overflow: hidden; }
.wrapper  {position: absolute; height: 220px; width: 9999px;}

jQuery - this bit works fine

$(".wrapper").stop().animate({left: '-312px'}, 500);

jQuery - but if i add parent.children it dies

$(".btn_next").click(function(event){
    event.preventDefault(); 
    $(this).parent().children(".wrapper").stop().animate({left: '-312px'}, 500);
});

Upvotes: 0

Views: 500

Answers (1)

user1106925
user1106925

Reputation:

Because the .wrapper is nested one level deeper, so it isn't a child.

Use .find() instead.

$(this).parent().find(".wrapper")

Indenting your HTML properly makes it much clearer...

<div class="gallery">
    <div class="viewport">
        <div class="wrapper">
            <img src="img/boat1.png" />
            <img src="img/boat2.png" />
        </div>
    </div>
    <a href="#" class="btn_prev">prev</a>
    <a href="#" class="btn_next">next</a>
</div>

Upvotes: 3

Related Questions