jquery - 查找第一个和最后一个类 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(); 

    });


});

但是我希望上一个和下一个按钮在类(class)中排在最后一个或第一个时禁用，所以我这样做:

$(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; 
}

我希望这是有道理的。因此，就像当您使用上一个和下一个按钮滚动浏览最后一张图片时，您不能再前进，只能后退，反之亦然。

这是我在这个 fiddle 中整理的一个简单示例 http://jsfiddle.net/DadYW/7/希望它有某种意义，我是 JQuery 的新手，这是我自己尝试的前几个元素之一。 非常感谢 -迈克

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