JQuery Найти количество элементов в строке в float li

Есть ли способ найти количество элементов (li tag) внутри ul, у которого он float: установлен на слева. Предположим, что я получил множество папок, которые визуально представлены тегами li. Из-за плавающего поведения, как только li не вписывается в одну строку, они будут толкаться вниз, давая им строки и столбцы. Вопросы .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}

Для моего разрешения li upto F делает одну строку, а остальное делает другую, как показано ниже. Я хотел бы, чтобы jquery способ получить число элементов (что в моем случае 6) в строке 1.

A B C D E F
G H I J

Контекст

Я добавляю события клавиатуры для перехода к каждой папке (li), используя левый, правый, верхний, нижний. Слева направо так же просто, как выделение следующего и предыдущего. Кнопки "Вверх" и "Вниз" должны перейти к следующей строке и над строкой. Теперь вы получите это:)

Ответы

Ответ 1

Мы можем сделать это, проверив количество 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 будет одинаковым для всех строк, за исключением, может быть, последнего, если общее количество LI не кратно lisInRow. Количество LI в последней строке можно легко обнаружить, выполнив: $('ul li').length % lisInRow

Ответ 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;

Ответ 3

Вы можете использовать следующую функцию, чтобы получить массив, который будет иметь количество элементов 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;

    }

Ответ 4

Вы можете сделать это по верхней позиции:

var arr = [];

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

Затем вы подсчитываете совпадающие значения в результирующем массиве - Как подсчитать соответствие значений в массиве Javascript

Ответ 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) );

Ответ 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);

Ответ 7

Небольшое обновление @techfoobar script:

Вы можете скрыть последнюю строку, когда количество ее элементов отличается от общего количества элементов

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

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