jQuery 查找 float li 中每行的项目数

Question

有没有办法找到 float: 设置为 的 ul 内的项目数量(li 标签)左。假设我有大量文件夹，这些文件夹在视觉上由 li 标签表示。由于 float 行为，一旦 li 不适合单行，它们就会被向下推，使其成为行和列。我的问题是

使用 jQuery ..etc 有没有办法确定每行的 li 数量

代码

<ul>
 <li>A</li>
 <li>B</li>
 <li>C</li>
 <li>D</li>
 <li>E</li>
 <li>F</li>
 <li>G</li>
 <li>H</li>
 <li>I</li>
 <li>J</li>
</ul>

样式

ul,li{margin:0 0;padding:0 0;}
ul li{display:inline;float:left}

对于我的分辨率，li 最多 F 生成一行，其余的生成另一行，如下所示。我想要一种 jquery 方法来获取第 1 行中的元素数量(在我的例子中为 6)。

A B C D E F
G H I J

上下文

我正在添加键盘事件以使用左、右、上、下导航到每个文件夹(li)。左右就像突出显示下一个和上一个 li 一样简单。顶部和向下键需要转到下一行和上面一行。现在你会得到它:)

Answer 1

我们可以通过检查 LI 的数量来实现这一点，这些 LI 的顶部(y 轴)位置与其之前的兄弟节点的位置相匹配。

演示:http://jsfiddle.net/KgBpx/1/

更新了演示: http://jsfiddle.net/KgBpx/2/

注意:在窗口大小调整时也进行了重新计算，以充分演示逻辑。

代码:

function calculateLIsInRow() {
    var lisInRow = 0;
    $('ul li').each(function() {
        if($(this).prev().length > 0) {
            if($(this).position().top != $(this).prev().position().top) return false;
            lisInRow++;
        }
        else {
            lisInRow++;   
        }
    });
    console.log('No: of lis in a row = ' + lisInRow);
}

calculateLIsInRow();

$(window).resize(calculateLIsInRow);

注意

如果 LI 总数不是 lisInRow 的倍数，则所有行的 LI 计数都相同，最后一行除外。通过执行以下操作可以轻松找到最后一行中的 LI 数量: $('ul li').length % lisInRow