javascript - 如果某些 dom 节点 float: left 或它们向下移动到新行，我如何用 javascript 判断？

Question

我遇到了一些浮动的 dom 节点：left 就像这个页面上的电影主网格一样，http ://trailers.apple.com/ 。主网格由 ul li ... 和许多 li 项目组成。每个 li 项浮动的左侧，因为 CSS 是：

#trailers li {
float: left; ...

如何从 Javascript 中判断 html dom 元素是向左浮动还是向下移动到新行？

Answer 1

您可以使用 jQuery 通过运行一个函数来检查这一点，该函数遍历所有列表项并检查 ali的顶部偏移值与其前一个兄弟的顶部偏移值的比较。这是一些执行此操作的 jQuery，它跳过第一个li（因为它没有前一个兄弟）并在每个上设置一个红色背景，li其顶部偏移值高于其前一个兄弟的顶部偏移值。

$("li").each(function () {
    if (!$(this).is("li:first-child")) {
        if ($(this).offset().top > $(this).prev().offset().top) {
            $(this).css('background-color', 'red');
        }
    }
});

这是一个jsFiddle展示它是如何工作的。调整容器大小后，您必须再次运行它。这是一个jsFiddle显示当列表项具有不同高度时会发生什么。除非您将“新行”定义为“从容器的左侧开始”，否则它仍然有效。在这种情况下，您可以改为检查左偏移值。

$("li").each(function () {
    if ($(this).offset().left < 100) {
        $(this).css('background-color', 'red');
    }
});

_{* 100 是li这里的宽度，它可以是任何低于第二li行左偏移值的值。}

这里展示了jsFiddle这种方法。