<div><div><div><div><div><div>各 div がフロートされ、幅が固定されているなどがあるとします。
プログラムで (jquery などを使用して) どの div が行の最後になるかをブラウザーでレンダリングして判断するにはどうすればよいですか?
つまり、同じページを大きな画面にレンダリングすると、次のようになります。
[ ][ ][ ][ ]<-I want this one
[ ][ ][ ]<-and this one
そして小さい画面
[ ][ ]<-I want this one
[ ][ ]<-and this one
[ ] etc
この質問は、私が多くの実用的な関連性を持っていることに興味をそそられました。私はOP自身の答えが好きですが、コンテナー上の単一のメソッドチェーンを使用して、宣言的に（そしてより直感的に）実行できると思いました。だから私はこれまでそれを調理しました：
$("#container div").each(function () {
$(this).toggleClass('rightMost',
$(this).is(':last-child') ||
$(this).position().left >= $(this).next().position().left
);
});
最後の要素でnullを返すため.next()、条件を最後の要素にも渡す必要があります。.is(':last-child')
また、コンテナは1つの要素に対して十分な幅しかない場合があるため（この場合、すべてを右端としてマークする必要があります）、現在の要素のposition（）。leftがそれ以上の場合に条件が適用されます。 .next（）の。
http://jsfiddle.net/mhfaust/TdXZJ/で、ドキュメント対応とウィンドウサイズ変更の両方で起動される機能とラップされた機能を確認できます。
更新 必要な効果が次のようにクラス名を適用/削除するだけではない場合は、条件をより一般的に適用できます（ただし、少しエレガントではありません）。
$("#container div").each(function () {
if($(this).is(':last-child') || $(this).position().left >= $(this).next().position().left)){
// do one thing...
}
else{
// ... or do the other.
}
});
これを試して：
html:
<div>a</div><div>a</div><div>a</div><div>a</div>
<div>a</div><div>a</div><div>a</div><div>a</div>
<div>a</div><div>a</div><div>a</div><div>a</div>
js:
$(window).resize(function(){
var mostRight=null;
$("div").each(function(){
var $this = $(this);
if (mostRight==null) mostRight=$this;
if(mostRight.position().left<$this.position().left){
mostRight=$this;
}
});
var mostRights=[];
$("div").each(function(){
var $this = $(this);
if( $this.position().left==mostRight.position().left){
mostRights.push($this);
}
});
mostRights.push($("div").last());
$("div").css("background-color","white");
for(var i=0;i<mostRights.length;i++){
$(mostRights[i]).css("background-color","red");
}
});
CSS:
div{
display:inline-block;
float:left;
width:50px;
}
ここを見て：
次の jQuery について考えてみましょう。
$(document).ready(function() {
var k = Math.floor(($('body').width())/$('div').width());
$('div:nth-child('+k+'n)').each(function() {
$(this).css('background-color','blue');
});
});
このコードは、行の最後の div のインデックスを計算します。次に、nth-child(equation)selector を にequation設定して使用しますk + 'n'。つまり、 の倍数であるインデックスを持つすべての div を選択しますk。つまり、行の最後にあるすべての div を選択します。
最後の列のすべての (元は赤だった) div を青く塗りつぶす完全な例を次に示します。
<!DOCTYPE html>
<html> <head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var k = Math.floor(($('body').width())/$('div').width());
$('div:nth-child('+k+'n)').each(function() {
$(this).css('background-color','blue');
});
});
</script>
<style>
div {
width: 2em;
height: 2em;
background-color: red;
border-radius: 4px;
display: inline-block;
}
</style>
</head>
<body>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</body> </html>
clph3r の回答に基づいて、これを解決する最も簡単な方法は、配列を逆方向に実行することであることがわかりました。
var prev=-1;
$($("#container div").get().reverse()).each(function(){
var $this = $(this)
if($this.position().left>prev){
$this.addClass("right");
}
prev=$this.position().left;
});
.last()または:last-childセレクターを使用できます。
var lastDiv = $("div").last();
または：
<div id="container">
<div><div><div><div><div><div>
</div>
var lastChild = $("#container:last-child");
jquery jquery を使用すると、次のようになります
$("div:last").val();