jquery - 给定一组 div，如何确定连续的最后一个

Question

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

我如何以编程方式(使用 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') 为最后一个元素传递条件

此外，由于容器可能只够容纳一个元素——在这种情况下，所有元素都应标记为最右边——当当前元素的 position().left 大于 < 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.
    }
});