Traverser des éléments li cachés

J'ai besoin d'ajouter des classes aux éléments li dans une ul #colorlist à des endroits spécifiques. Ainsi, chaque 15ème élément de li devient une classe, chaque 16ème devient un autre (le 15ème a besoin d'un retournement pour se retourner et le 16ème est le premier d'une rangée). Ceci est assez facile avec ceci:Traverser des éléments li cachés

$('#colorlist li:nth-child(15n+1)').addClass('first-column');

Toutefois, j'ai alors différents filtres qui masquent les articles li et le problème vient alors que dans ceux qui sont cachés sont encore comptés. Je pense que quelque chose comme ça pourrait être la bonne approche, mais beaucoup de choses dont je ne suis pas sûr. L'idée ici serait de tester si le nombre total divisé par 15 est égal à un nombre entier. Si c'est le cas, j'appliquerais ma classe.

$("#colorlist li").each(function(){ 
    if($("#colorlist li:visible").size() % 15 == ???)$(this).addClass('first-column'); 
    });

Vous ne savez pas comment tester un nombre entier ou comment l'utiliser pour chaque 15e élément. Comme vous pouvez le voir, je suis en quelque sorte perdu! Toute aide très appréciée.

Source

2011-06-20 hmon

Comment cacher vos éléments 'li'? Si vous utilisez 'display: none', ils ne seront pas comptés. –

J'utilise les commandes jquery show et hide. Selon le firebug "hide" leur donne un affichage: none mais le nth-child les compte encore. – hmon

Je pense que vous voudrez peut-être:

$("#colorlist li:visible") 
    .filter(function(i){ return i % 15 === 0;}) 
    .addClass('first-column');

Cela calculer la position que prendre les éléments visibles en compte.

DEMO

Source

2011-06-20 11:48:51

+1, pourrait réduire encore quelques caractères avec 'retour! (I% 15)' – Niklas

Merci beaucoup cela a bien fonctionné. Juste pour noter pour tous les autres débutants comme moi en lisant ceci - je l'ai changé en (i + 1)% 15 === 0, qui se débarrasse du premier li obtenant la classe et le rend visuellement tous les 15 li qui l'obtiennent. – hmon

@hmon: Je n'étais pas sûr de celui-là, parce que ': nth-child (15n + 1)' dans votre premier exemple de code sélectionne aussi le premier élément. Mais de toute façon :) Vous pouvez aussi faire 'i% 15 === 14'. –

Le problème est peut-être que votre passage tous les éléments li à jQuery.each. Essayez:

$("#colorlist li:visible").each(function(i, elem){ 
    var $el = $(this); 
    //If is 0 add class 
    if(i % 15 === 0){ 
     $el.addClass('first-column'); 
    } 
});

Demo ici: http://jsfiddle.net/tomgrohl/473ky/

Source

2011-06-20 11:48:55 Tomgrohl

Merci - cela a fonctionné pour moi aussi – hmon

Traverser des éléments li cachés

Répondre

Questions connexes