javascript - 如何隐藏附加的最后一个框？

Question

HTML:

<button>Append</button>
<div id="boxWrap">
    <div id="innerWrap"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div>
</div>
<input id="count" value=0></input>

CSS:

.box {
    width: 100px;
    height: 100px;
    background-color: #333333;
    margin: 5px;
    display: inline-block;
    position: relative;
}
#boxWrap {
    width: 100%;
     overflow-y: visible;
    height: 20px;

}
#innerWrap {
    white-space:nowrap;
    overflow-x: hidden;
    max-width: 100%;
}

J查询:

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

    var html = '<div class="box"></div>';
    $inWrap = $('#innerWrap');
    $inWrap.prepend(html);
    $lastBox = $inWrap.find('.box');

    var count = parseInt( $('#count').val(), 10 );
    count = count+1;
    alert(count);
    $('#count').val(count.toString());
    var limit = $inWrap.width() / 110;
    if( 110*count >= $inWrap.width() ) {
        $lastBox.index(count-1).css( {"display": "none" }  );
    }

});

我希望显示的最后一个框适合页面以显示:附加另一个时无。例子:4个盒子可以放，点击追加第四个盒子隐藏5盒取而代之点击追加第 5 个盒子隐藏第 6 个盒子取而代之

这样做的原因是它们最终会存储数据，我希望在它们被用户关闭时能够进行反向操作。我的问题是试图获取盒子的索引。

谢谢!

编辑 ************ *****

谢谢杰森P

有相同目标的请回答:

$('#btn1').click(function(){

        var count = parseInt( $('#count').val(), 10 );
    count = count+1;
    var html = '<div class="box" id="' +count+ '"></div>';
    $inWrap = $('#innerWrap');
    $inWrap.prepend(html);
    $lastBox = $inWrap.find('.box');



    $('#count').val(count.toString());
    var limit = $inWrap.width() / 110;
    if( 110*count >= $inWrap.width() ) {
            $('#innerWrap .box:visible').last().hide();
        }

});
$('#btn2').click(function(){ // want the last one hidden to be first one back so it's the first one with display: none

    var count = parseInt( $('#count').val(), 10 ) - 1;
    $('#count').val(count.toString());
    $('#innerWrap .box:visible').last().hide();
    var limit = $inWrap.width() / 110;

    if(count > limit)
        $('#innerWrap .box:hidden').first().show();
    });

Answer 1

您应该能够像这样找到最后一个可见框:

$('#innerWrap .box:visible').last();