3

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

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

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

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

和一个更小的屏幕

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

6 回答 6

2

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

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

由于.next()在最后一个元素上返回 null，因此您需要让最后一个元素的条件也通过.is(':last-child')

此外，由于容器可能仅对一个元素足够宽——在这种情况下，所有元素都应标记为最右边——当当前元素的 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.
    }
});
于 2013-02-23T21:39:12.040 回答
1

考虑以下 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'，即选择所有索引为 的倍数的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>
于 2013-02-23T19:29:00.383 回答
1

尝试这个：

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/

于 2013-02-23T12:01:02.520 回答
1

根据 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

于 2013-02-23T15:52:31.547 回答
0

您可以使用.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/

于 2013-02-23T11:52:55.563 回答
0

通过使用 jquery jquery ，像这样

$("div:last").val();
于 2013-02-23T11:52:58.870 回答