why jQuery prev doesn't work in this case?
<p>I  have group of section each has prev and next navigation buttons to navigate to the co-responding section.</p>

<pre><code>&lt;section id="sec1"&gt;
&lt;img src="css/images/prev-btn.png" class="prev" /&gt;
&lt;img src="css/images/next-btn.png" class="next" /&gt;
&lt;/section&gt;
&lt;div class="seperator"&gt;&lt;/div&gt;
&lt;section id="sec2"&gt;
    &lt;img src="css/images/prev-btn.png" class="prev"/&gt;
    &lt;img src="css/images/next-btn.png" class="next" /&gt;
&lt;/section&gt;
&lt;div class="seperator"&gt;&lt;/div&gt;
&lt;section id="sec3"&gt;
&lt;img src="css/images/prev-btn.png" class="prev"/&gt;
&lt;img src="css/images/next-btn.png" class="next" /&gt;
&lt;/section&gt;
</code></pre>

<p>the next button is working just fine with the following code:</p>

<pre><code>$('.next').click(function () {
    var next = $(this).parent().next();
    $.scrollTo(next, 1500, { easing: "easeInOutCirc" });

});
</code></pre>

<p>but the prev button does not navigate to the prev element.</p>

<p>i have tried:</p>

<p>This</p>

<pre><code>$('.prev').click(function () {
    var prev= $(this).parent().prev();
    $.scrollTo(prev, 1500, { easing: "easeInOutCirc" });
});
</code></pre>

<p>and</p>

<pre><code>$('.prev').click(function () {
    var prev= $(this).parent().prevAll().last();
    $.scrollTo(prev, 1500, { easing: "easeInOutCirc" });

});
</code></pre>

<p>and </p>

<pre><code>$('.prev').click(function () {
    var prev= $(this).parent().prev('section');
    $.scrollTo(prev, 1500, { easing: "easeInOutCirc" });

});
</code></pre>

<p>what am i doing wrong?</p>
