jQuery的查找每行中的项目里飘来的数(jQuery Find number of items p

2019-07-30 11:49发布

有没有办法找项目(数量li一内标签) ul其中有它的浮动:设置到 。 假设我得到了它在视觉上被代表文件夹的负荷li标签。 由于浮动行为,只要li不适合单排,他们可以下推给它的行和列look.my问题是

使用jQuery ..等有没有一种方法来确定的数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的方式来获得元素的数量(这是6在我的情况),第1行。

A B C D E F
G H I J

上下文

我加入键盘事件用左,右,上导航到每个文件夹(LI),同比下降。 左,右是下一个突出和以前李的那样简单。 顶部和向下键需要去下一行,上面一行。 现在,你会得到它:)

Answer 1:

我们可以通过检查LIS的数量与他们的顶部(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);

注意

LIS的数量将是相同的所有行除了可能最后如果LIS的总数不是lisInRow的倍数。 LIS最后一排的数量可以很容易地通过做可以看出: $('ul li').length % lisInRow



Answer 2:

使用滤波器()使对代码量较小。

function filterByTop(top) {
  return function(i) { return $(this).offset().top == top; };
}
var el = $('li:first');
var rowSz = $('li').filter(filterByTop(el.offset().top)).length;


Answer 3:

您可以使用下面的函数来得到一个数组,这将有每每一行李项的数目。 如果你想只浮动左立项目,您可以轻松地添加条件。

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;

    }


Answer 4:

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

var arr = [];

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

然后,你算在所得数组匹配的值- 如何计算在Javascript中的矩阵匹配值



Answer 5:

试试这个(真的出了它,可能需要一些调试)

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) );


Answer 6:

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);


Answer 7:

@techfoobar脚本的一个小更新:

您可以隐藏最后一行时,其项目数是共同的项目计数不同

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

if(lisInLastRow != lisInRow) {
    $('ul li').slice( -lisInLastRow ).hide();
}


文章来源: jQuery Find number of items per row in floated li's