jQuery查找浮动li中每行的项目数

Question

有没有办法找到其中浮动的项目(li标签)的数量:设置为左.假设我有大量的文件夹,这些文件夹由标签直观地表示.由于浮动行为一旦不适合单行,它们将被推下来给它行和列看.我的问题是ullili

使用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}

对于我的解决方案,李先生在F上排成一排,其余的排在下面.我想要一个jquery方法来获取第1行中的元素数量(在我的情况下为6).

A B C D E F
G H I J

上下文

我正在添加键盘事件以使用left,right,top,down导航到每个文件夹(li).左边就像突出显示下一个和上一个li一样简单.上下键需要转到下一行和上一行.现在你会得到它:)

Answer 1

我们可以通过检查其顶部(y轴)位置与其先前兄弟位置匹配的LI的数量来实现此目的.

演示: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