27

有没有办法在 a 中找到它的float:设置为left的项目数（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}

对于我的决议 li 最多 F 排成一排，其余的排成另一排，如下所示。我想要一种 jquery 方法来获取第 1 行中的元素数量（在我的情况下为 6）。

A B C D E F
G H I J

语境

我正在添加键盘事件以使用左、右、上、下导航到每个文件夹（li）。左右就像突出显示下一个和上一个 li 一样简单。上下键需要转到下一行和上一行。现在你会明白的：）

4

7 回答 7

47

我们可以通过检查 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

于 2012-07-18T10:40:04.057 回答
2

使用 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;
于 2015-07-27T01:53:54.953 回答
0

您可以使用以下函数获取一个数组，该数组将包含每行的 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;

    }
于 2012-07-18T10:36:08.647 回答
0

您可以通过顶部位置来做到这一点：

var arr = [];

$('ul li').each(function(i){
    arr[i] = $(this).position().top;
});

然后计算结果数组中的匹配值 -如何计算 Javascript 数组中的匹配值

于 2012-07-18T10:37:55.663 回答
0

试试这个（真的不行，可能需要一些调试）

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) );
于 2012-07-18T10:40:28.260 回答
0 
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);
于 2013-06-16T17:01:55.313 回答
0

@techfoobar 脚本的小更新：

当其项目数与常见项目数不同时，您可以隐藏最后一行

http://jsfiddle.net/cavico/KgBpx/222/

if(lisInLastRow != lisInRow) {
    $('ul li').slice( -lisInLastRow ).hide();
}
于 2014-06-03T14:41:47.360 回答