this parent children not working
<h2>Why doesn't this work?</h2>

<p>HTML</p>

<pre><code>&lt;div class="gallery"&gt;
    &lt;div class="viewport"&gt;
    &lt;div class="wrapper"&gt;
        &lt;img src="img/boat1.png" /&gt;
        &lt;img src="img/boat2.png" /&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;a href="#" class="btn_prev"&gt;prev&lt;/a&gt;
    &lt;a href="#" class="btn_next"&gt;next&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.viewport {position: relative; height: 220px; width: 280px; overflow: hidden; }
.wrapper  {position: absolute; height: 220px; width: 9999px;}
</code></pre>

<p>jQuery - this bit works fine</p>

<pre><code>$(".wrapper").stop().animate({left: '-312px'}, 500);
</code></pre>

<p>jQuery - but if i add parent.children it dies</p>

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