jQuery Trouver le nombre d’éléments par ligne dans les liens flottants

Existe-t-il un moyen de trouver le nombre d’éléments (balise li ) dans un ul qui a son flottant: positionné à gauche . Supposons que je reçois des charges de dossiers qui sont représentés visuellement par des balises li . En raison de son comportement flottant, dès que le li ne tient pas dans une seule ligne, il sera abaissé pour lui donner des rangées et des colonnes. Mes questions sont:

Utiliser jQuery ..etc Est-il possible de déterminer le nombre de li pour chaque ligne

Code

 
  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J

Style

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

Pour ma résolution, li’s jusqu’à F fait un rang et le rest, un autre comme ci-dessous. Je voudrais un moyen jQuery d’obtenir le nombre d’éléments (qui est 6 dans mon cas) dans la rangée 1.

 ABCDEF GHIJ 

Le contexte

J’ajoute des événements de clavier pour naviguer dans chaque dossier (li) en utilisant gauche, droite, haut, bas. Gauche Droite est aussi simple que de mettre en évidence les li précédents et précédents. Les touches du haut et du bas doivent aller à la rangée suivante et à la rangée supérieure. Maintenant, vous obtiendrez 🙂

Nous pouvons le faire en vérifiant le nombre de LI dont les positions supérieures (axe des ordonnées) correspondent à celles de leurs frères et sœurs précédents.

Démo: http://jsfiddle.net/KgBpx/1/

Mise à jour de la démo: http://jsfiddle.net/KgBpx/2/

Remarque: le recalcul effectué sur le redimensionnement de la fenêtre permet également de démontrer pleinement la logique.

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

REMARQUE

Le nombre de LI sera le même pour toutes les lignes, sauf peut-être la dernière si le nombre total de LI n’est pas un multiple de lisInRow. Le nombre de LIs dans la dernière ligne peut être facilement trouvé en faisant: $('ul li').length % lisInRow

Utiliser filter () permet de réduire la quantité de code.

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

Vous pouvez utiliser la fonction suivante pour obtenir un tableau contenant le nombre d’éléments Li pour chaque ligne. Si vous souhaitez uniquement les éléments li avec float à gauche, vous pouvez facilement append cette condition.

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

Vous pouvez le faire en première position:

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

Ensuite, vous comptez les valeurs correspondantes dans le tableau résultant – Comment compter les valeurs correspondantes dans le tableau Javascript

Essayez ceci (vraiment en dehors de cela, peut nécessiter un débogage)

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

Mettre à jour

Pour obtenir la valeur de ligne la plus élevée dans un tableau, vous pouvez utiliser quelque chose comme ceci:

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

Une petite mise à jour du script @techfoobar:

Vous pouvez masquer la dernière ligne lorsque le nombre d’éléments est différent du nombre d’éléments courants.

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

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