jQuery Finden Sie die Anzahl der Elemente pro Zeile in Float-Lis

Gibt es eine Möglichkeit, die Anzahl der Artikel zu finden (li Tag) in a ul was hat es schweben: einstellen links. Angenommen, ich habe jede Menge Ordner, die visuell dargestellt werden durch li Stichworte. Aufgrund des Schwimmverhaltens sobald die li passt nicht in eine einzelne Reihe, sie werden nach unten gedrückt, wodurch sie wie Reihen und Spalten aussehen. Meine Fragen sind

Mit jQuery ..etc Gibt es eine Möglichkeit, die Anzahl der li Für jede Reihe

Code

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

Stil

ul,li{margin:0 0;padding:0 0;}
ul li{display:inline;float:left}

Für meine Auflösung macht li bis F eine Zeile und der Rest eine andere wie unten. Ich möchte eine Jquery-Methode, um die Anzahl der Elemente (in meinem Fall 6) in Zeile 1 abzurufen.

A B C D E F
G H I J

Kontext

Ich füge Tastaturereignisse hinzu, um mit links, rechts, oben, unten zu jedem Ordner (li) zu navigieren. Links rechts ist so einfach wie das Hervorheben der nächsten und vorherigen Lis. Obere und untere Tasten müssen zur nächsten Reihe und darüber gehen. Jetzt kriegst du es 🙂

Wir können dies tun, indem wir die Anzahl der LIs überprüfen, deren obere Positionen (y-Achse) mit denen ihrer vorherigen Geschwister übereinstimmen.

Demo: http://jsfiddle.net/KgBpx/1/

Aktualisierte Demo: http://jsfiddle.net/KgBpx/2/

Hinweis: Die Neuberechnung wird auch bei der Fenstergrößenänderung durchgeführt, um die Logik vollständig zu demonstrieren.

Code:

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

HINWEIS

Die Anzahl der LIs ist für alle Zeilen gleich, außer vielleicht für die letzte, wenn die Gesamtzahl der LIs kein Vielfaches von lisInRow ist. Die Anzahl der LIs in der letzten Zeile kann leicht herausgefunden werden, indem man Folgendes tut: $('ul li').length % lisInRow

Die Verwendung von filter() sorgt für eine geringere Codemenge.

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

Sie können die folgende Funktion verwenden, um ein Array zu erhalten, das die Anzahl der Li-Elemente pro Zeile enthält. Wenn Sie nur die li-Elemente mit Float übrig haben möchten, können Sie diese Bedingung einfach hinzufügen.

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;

    }

Sie können es durch Spitzenposition tun:

var arr = [];

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

Dann zählen Sie übereinstimmende Werte im resultierenden Array – So zählen Sie übereinstimmende Werte im Array von Javascript

Probieren Sie dies aus (wirklich raus, benötigt möglicherweise etwas Debugging)

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

Aktualisieren

Um den höchsten Zeilenwert in einem Array zu erhalten, können Sie Folgendes verwenden:

console.log( Math.max.apply(null, numberPerRow) );

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

Ein kleines Update des @techfoobar-Skripts:

Sie können die letzte Zeile ausblenden, wenn die Anzahl der Elemente von der Anzahl der allgemeinen Elemente abweicht

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

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