javascript - 获取 float 在下一行的第一个元素

Question

我有一个向左浮动的元素列表:

<style>
ul {
  overflow: hidden;
  width: 100%;
}
ul li {
  float: left;
  width: 100px;
}
</style>
<ul>
  <li id="#one">One</li>
  <li id="#two">Two</li>
  <li id="#three">Three</li>
  ...
</ul>

...如果窗口宽度为 200px，则漂浮在第二行的第一个元素将是 #three...如果窗口宽度仅为 100px，则将是 #two。

现在每个<li>有一个点击事件边界，它应该告诉我哪个元素是下一行的第一个元素，由它自己看到。

点击窗口宽度为 200px 的#one 我想要得到#three，而窗口宽度为 100px 我想要得到#two。

我试图通过获取被点击元素的位置来解决这个问题，使用 .getBoundingClientRect() 查询窗口内的位置，获取Element的高度(这里取20px)，然后通过document.elementFromPoint(y,x)获取Element ...像这样:

y = clicked_element.getBoundingClientRect().left
x = clicked_element.getBoundingClientRect().top + 21
first_element_on_next_line = document.elementFromPoint(y,x)

到目前为止，还不错……当然，如果下一行的第一个元素真的在窗口内，这当然是可行的! :-\

这就是我卡住的地方...如果我的窗口宽度为 200 像素，窗口高度仅为 20 像素(仅作为示例)，我就无法选择 #three with document.elementFromPoint()因为它的位置在窗外。

我也可以使用 jQuery，无论如何它都包含在内，但遇到的一切都是使用 document.elementFromPoint()

有什么想法吗？？

Answer 1

您可以使用 jQuery .position() 方法使用以下逻辑:{as suggested by maja}

$(function () {
    var $lis = $('ul li').on('click', function(){
        var $nextFirstElement = $(this).nextAll('.first').first();
        console.log($nextFirstElement);
    });
    $(window).on('resize', function () { 
        var initialLeft;
        $lis.each(function(i){
            if (i === 0) { // this could be put out of the loop, but...
                initialLeft = $(this).position().left; 
            }
            $(this).toggleClass('first', i === 0 || $(this).position().left === initialLeft);
        });
    }).resize();    
});

-jsFiddle-