Question

假设我有<div><div><div><div><div><div>等，每个div都浮动并且具有固定的宽度。

我如何以编程方式（使用jquery或其他方式）确定哪些div将位于行的末尾，如在浏览器中呈现的那样？

换句话说，在大屏幕上呈现相同的页面：

[ ][ ][ ][ ]<-I want this one
[ ][ ][ ]<-and this one

和更小的屏幕

[ ][ ]<-I want this one
[ ][ ]<-and this one
[ ] etc

Answer 1

这个问题引起了我的兴趣，因为它具有很多实际意义。我喜欢OP自己的答案，但我认为可以通过容器上的单个方法链以声明方式（更直观地）完成。所以我已经把它煮熟了：

$("#container div").each(function () { 
    $(this).toggleClass('rightMost',
        $(this).is(':last-child')  || 
        $(this).position().left >= $(this).next().position().left
    );
});

由于.next()在最后一个元素上返回null，因此您需要为.is(':last-child')

的最后一个元素传递条件

此外，由于容器可能只对一个元素足够宽 - 在这种情况下所有容器都应标记为最右边 - 当当前元素的位置（）时，条件应该适用。左边大于< em>或等于 .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.
    }
});

Answer 2

试试这个：

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

看这里：

http://jsfiddle.net/bznEx/3/

Answer 3

根据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;
});

JSFiddle

Answer 4

考虑以下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)选择器，equation设置为k + 'n'，即选择所有索引为k的倍数的div，即所有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>

Answer 5

您可以使用.last()或:last-child选择器。

var lastDiv = $("div").last();

或者：

<div id="container">
   <div><div><div><div><div><div>
</div>

var lastChild = $("#container:last-child");

http://api.jquery.com/last-child-selector/

Answer 6

使用jquery jquery，类似这样的

$("div:last").val();

给定div的集合，我如何确定连续的最后一个

6 个答案: