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

点击#one，窗口宽度为200px我想获得#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)

到目前为止，这么好......但当然，如果下一行的第一个元素真的在窗口内，这只是工作！： - \

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

我也可以使用jQuery，但它包含在内，但所有内容都是使用document.elementFromPoint()

任何想法？

Answer 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-

Answer 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()
    })
  })

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

2 个答案:

-jsFiddle-