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

前端之家收集整理的这篇文章主要介绍了jQuery查找浮动li中每行的项数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有办法找到一个项目(li标签)内的一个ul,它的float:设置为左。假设我有很多文件夹,由li标签可视化表示。由于浮动行为一旦li不适合单排,他们将被推下来给它行和列look.my问题是

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

对于我的决议,李的最高只有一排,其余的则如下。我想要一个jQuery的方式来获取元素数量(在我的情况下为6)在第1行。

A B C D E F
G H I J

背景

我正在添加键盘事件以使用左,右,上,下导航到每个文件夹(li)。右边是突出显示下一个和上一个的简单。上下键需要去下一行和上一行。现在你会得到它:)

解决方法

我们可以通过检查其顶端(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的计数将相同,除非LI的总数不是lisInRow的倍数,否则最后一个。最后一行的LI数可以通过以下方式找到:$(‘ul li’)。length%lisInRow

猜你在找的jQuery相关文章