查找第一個和最後類的JQuery

Question

如果我這樣做它的工作原理：

$(document).ready(function() { 
    $('.button1').click(function() { 
     var get_id = $(this).attr('id'); 
     $('.outter').fadeIn(750); 
     $('#div_'+get_id).show(); 

    }); 
    $('.exit_button').click(function() { 
     $('.outter').fadeOut(); 
     $('.inner_content').hide(); 
    }); 

    $('.next').click(function() { 
     var current1 = $('.inner_content:visible');      
       current1.hide(); 
     current1.next('.inner_content').show(); 

    }); 

    $('.previous').click(function() { 
     var current2 = $('.inner_content:visible'); 
     current2.hide(); 
     current2.prev('.inner_content').show(); 

    }); 


}); 

但我想一個和下一個按鈕來關閉，當他們來到他們班最後還是第一所以我這樣做：

$(document).ready(function() { 
    $('.button1').click(function() { 
     var get_id = $(this).attr('id'); 
     $('.outter').fadeIn(750); 
     $('#div_'+get_id).show(); 

    }); 
    $('.exit_button').click(function() { 
     $('.outter').fadeOut(); 
     $('.inner_content').hide(); 
    }); 

    $('.next').click(function() { 
     var current1 = $('.inner_content:visible'); 
     var get_id2 = current1.attr('id'); 
     if(('#'+get_id2+'.inner_content').is(':last')) 
     { 
     } 
     else 
     { 
     current1.hide(); 
     current1.next('.inner_content').show(); 
     } 
    }); 

    $('.previous').click(function() { 
     var current2 = $('.inner_content:visible'); 
     var get_id3 = current2.attr('id');  
     if(('#'+get_id3+'.inner_content').is(':first')) 
     { 
     } 
     else 
     { 
     current2.hide(); 
     current2.prev('.inner_content').show(); 
     } 
    }); 


}); 

但我不能得到那個工作。

我的HTML：

<img src="thumbs/1.jpg" class="button1" id="pic_01" /> 
<img src="thumbs/2.jpg" class="button1" id="pic_02" /> 
<img src="thumbs/3.jpg" class="button1" id="pic_03" /> 
<img src="thumbs/4.jpg" class="button1" id="pic_04" /> 

<div class="outter"> 
    <img src="http://go.iomega.com/static/img/x_button_close.png" class="exit_button" /> 
     <div class="inner"> 

      <div class="inner_content" id="div_pic_01"> 
      <img src="thumbs/1.jpg" /> 
      </div> 
      <div class="inner_content" id="div_pic_02"> 
      <img src="thumbs/2.jpg" /> 
      </div> 
      <div class="inner_content" id="div_pic_03"> 
      <img src="thumbs/3.jpg" /> 
      </div> 
      <div class="inner_content" id="div_pic_04"> 
      <img src="thumbs/4.jpg" /> 
      </div> 

     </div> 
    <button class="previous">Prev</button><button class="next">Next</button> 
</div> 

我的CSS：

.outter{ 
    display:none; 
    width:620px; 
    height:380px; 
    top:20%; 
    left:17.5%; 
    position:absolute; 
    z-index:4; 
} 
.inner{ 
    width:600px; 
    height:330px; 
    background-color:white; 
    border:1px solid #000; 
    -moz-box-shadow:0px 0px 10px #111; 
    -webkit-box-shadow:0px 0px 10px #111; 
    box-shadow:0px 0px 10px #111; 
    margin-top:15px; 
    z-index:3; 
} 
.exit_button{ 
    float:right; 
    z-index:5; 
} 
.inner_content{ 
    display:none; 
} 

我希望這是有道理的。所以就像你用上一個和下一個按鈕滾動一樣，最後一張圖片出現時，你不能再往前走，你只能往後走，或者反之亦然。

這裏有一個簡單的例子，我把這個小提琴放在一起http://jsfiddle.net/DadYW/7/希望它有某種意義，我對JQuery非常陌生，這是我嘗試獨立完成的第一個項目。 多謝 -Mike

Answer 1

我會導航後禁用按鈕（或隱藏它，你想）到下一首或上，點擊時不會：

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

    var current1 = $('.inner_content:visible'), 
     $next = current1.next('.inner_content'); 

    // hide current/show next 
    current1.hide(); 
    $next.show(); 

    // if next is last, disable the button 
    if ($next.is(':last-child')) { 
     $(this).prop('disabled', true); 
    } 

    // enable the previous button 
    $('.previous').prop('disabled', false); 
}); 

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

    var current2 = $('.inner_content:visible'), 
     $prev = current2.prev('.inner_content'); 

    // hide current/show previous 
    current2.hide(); 
    $prev.show(); 

    // if previous is first, disable the button 
    if ($prev.is(':first-child')) { 
     $(this).prop('disabled', true); 
    } 

    // enable the next button 
    $('.next').prop('disabled', false); 
}); 

DEMO