获取下一行浮动的第一个元素答案

【问题标题】：Get the first Element that is floating on next line获取下一行浮动的第一个元素
【发布时间】：2015-01-25 20:33:25
【问题描述】：

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

<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> 都有一个点击事件绑定，它应该告诉我哪个元素是下一行的第一个元素，可以单独看到。

单击窗口宽度为 200 像素的 #one 我想要获得 #three，而窗口宽度为 100px 我想要获得 #two。

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

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

到目前为止，一切都很好......但是如果下一行的第一个元素真的在窗口内，这当然是可行的！ :-\

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

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

有什么想法吗？？

【问题讨论】：

看看query.position：api.jquery.com/position
几天前我做了一些与此非常相似的事情here。更复杂，因为 OP 想要所有相邻的元素，但可能会对您有所帮助
@maja 但是 jQuery.position() 只是给了我一个特定元素的位置，我不能用它查询一个元素......我只想遍历整个列表li's 并检查他们的位置......还是我完全失明了？？
可以遍历 nextUntil() 并检查 position.top。第一个上升的在下一行
@charlietfl 感谢您的提示 :-) 也考虑通过采用父子宽度来计算索引，但我认为它对于这项任务来说有点“复杂”......但也许这个这是我的方法

标签： javascript jquery html css

【解决方案1】：

您可以使用 jQuery .position() 方法使用以下逻辑：{如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-

【讨论】：

【解决方案2】：

我现在使用的解决方案（实际上是评论中提到的解决方案 charlietfl）是这样的：

  $(function(){
    var list = $("ul"),
        lis = list.children(),
        first_li = lis.first(),
        list_width, first_li_width, items_per_line

    var set_vars = function(){
      list_width = list.width()
      first_li_width = first_li.width()
      items_per_row = Math.floor(list_width / first_li_width)
    }

    set_vars()

    lis.click(function(){
      index = lis.index(this)
      next_first_index = index + (items_per_row - (index % items_per_row))
      console.log(next_first_index)
    })

    $(window).resize(function(){
      set_vars()
    })
  })

【讨论】：