0

編集：慎重に！FIRSTラインのラストBOX！コンテナの幅はいつでも変更できます。すなわち。コンテナー幅 1000px = 1 行あたり 10 ボックス! 行の最後の 10 番目のボックスを選択する必要があります。ただし、コンテナーの幅は変更できます 。

チェック例

箱は見えますか？わかった。ページが全画面表示の場合、行の最後のボックス (8 番目のボックス) を選択する必要があります。ブラウザ ウィンドウが 800px 未満の場合 - 別のボックスが最後の行の位置 (つまり、7 番目、6 番目、5 番目) になります。

======================================

ご覧のとおり、ここに小さなボックスを含む「コンテンツ div」があります。コンテンツ div は、ユーザーの画面解像度の幅をいつでも変更できます。各「ボックス」は画面上に一列に並べられますが、最後のボックスは毎回異なります。

jqueryで画面の1行目または2行目の最後のボックスのIDを取得するには? コンテンツ div のサイズが変更された場合でも、ボックスの行から ID を取得するための普遍的な方法はありますか?

初期ソースの例:

<style type="text/css">
.box{float: left;
height:100px;
width:100px;
}
.content {
    max-width: 800px;
    width: auto;
    margin: 0 auto;
}
</style>

<div class=content>
<div class=box id=xxx1>xxx</div>
<div class=box id=xxx2>xxx</div>
...
<div class=box id=xxx200>xxx</div>
</div>
4

3 に答える 3

2

これを試して：

$(window).resize(function(){
    var w = $('.content').width() / 100;
    var id = $('.box').eq(w - 1).attr('id');
})
于 2012-05-11T18:33:12.287 に答える
1

これで、あなたが何を望んでいるのかがわかったので、このために次のコードを使用できます。

var top = $('.box:first').offset().top; 
var firstLine = $('.box').filter(function(){
    return $(this).offset().top == top;
});
// now you can select any of first line element

  firstLine.last(); // Select Last item of first line
  firstLine.eq(3); // box 4

この場合、最初のボックス オフセットを取得し、それを他のボックスのトップ オフセットと比較します ...

于 2012-05-11T18:44:14.663 に答える
1 
$(".box").last()[0].id; // returns the ID of the last element with class "box" found
于 2012-05-11T18:31:04.700 に答える