jQuery查找浮动li中每行的项目数
有没有办法在ul中找到具有浮动的项目数量（ li标签） ：设置为左侧 。 假设我有大量的文件夹，这些文件夹由li标签直观地表示。 由于浮动行为，一旦li不适合单行，它们将被推下来给它行和列看。我的问题是
使用jQuery ..etc有没有办法确定每行的li数
码
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
样式
ul,li{margin:0 0;padding:0 0;} ul li{display:inline;float:left}
对于我的解决方案，李先生在F上排成一排，其余的排在下面。 我想要一个jquery方法来获取第1行中的元素数量（在我的情况下为6）。
ABCDEF GHIJ
上下文
我正在添加键盘事件以使用left，right，top，down导航到每个文件夹（li）。 左边就像突出显示下一个和前一个li一样简单。 上下键需要转到下一行和上一行。 现在你会得到它:)
我们可以通过检查其顶部（y轴）位置与其先前兄弟位置匹配的LI的数量来实现此目的。
演示： http ： //jsfiddle.net/KgBpx/1/
更新的演示： http ： //jsfiddle.net/KgBpx/2/
注意：在窗口上重新计算也会resize以完全演示逻辑。
码：
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
使用filter（）可以减少代码量。
function filterByTop(top) { return function(i) { return $(this).offset().top == top; }; } var el = $('li:first'); var rowSz = $('li').filter(filterByTop(el.offset().top)).length;
您可以使用以下函数来获取一个数组，该数组将包含每行的Li项数。 如果您只想要剩下浮动的li项目，您可以轻松添加该条件。
function computeItemsPerRow() { var itemsInRows = new Array(); var countLi = $('ul li'); var rowWidth = $('#rowContainer').width(); // TODO: Replace with the proper row container selector. var curRowWidth = 0; var itemsInCurRow = 0; for (var i = 0; i < countLi; i++) { var itemWidth = $('li:eq(' + i + ')').width(); if (curRowWidth + itemWidth > rowWidth || i == countLi - 1) { itemsInRows[itemsInRows.length] = itemsInCurRow; itemsInCurRow = 1; curRowWidth = itemWidth; } else { itemsInCurRow++; curRowWidth = curRowWidth + itemWidth; } } return itemsInRows; }
你可以通过顶部位置做到：
var arr = []; $('ul li').each(function(i){ arr[i] = $(this).position().top; });
然后计算结果数组中的匹配值 – 如何计算Javascript数组中的匹配值
试试这个（真的不用了，可能需要一些调试）
var numberPerRow = []; var offsets = []; $("li").each(function(){ var thisOffset = $(this).offset().top; var index = $.inArray(thisOffset, offsets); if(index >=0){ numberPerRow[index]++; }else{ offsets.push(thisOffset); numberPerRow.push(1); } });
更新
要获得数组中最高的行值，可以使用以下内容：
console.log( Math.max.apply(null, numberPerRow) );
var rows = 0; $('li').each(function() { var $this = $(this); var $prev = $this.prev(); if ($prev.length && $this.position().top === $prev.position().top) rows++; }); console.log(rows);
@techfoobar脚本的小更新：
当项目计数与公共项目计数不同时，您可以隐藏最后一行
http://jsfiddle.net/cavico/KgBpx/222/
if(lisInLastRow != lisInRow) { $('ul li').slice( -lisInLastRow ).hide(); }