Faire css nth-child() affectent uniquement visible

Est-il un moyen de n'affectent les éléments visibles avec ce css?

table.grid tr.alt:nth-child(odd)
{
    background:#ebeff4;
}

table.grid tr.alt:nth-child(even)
{
    background:#ffffff;
}

Si j'utilise un $('select some tr:s').hide() qui cache certaines lignes, je reçois un mélange de petits et de même style, mais le tout dans un mixup.

  • Avez-vous envisagé d'en réappliquer le CSS après le $().hide() à l'aide de $('.alt:visible:même') et $('alt:visible:odd')?
InformationsquelleAutor Andreas | 2011-07-08
  1. 17

    J'ai fini par utiliser la solution Rodaine l'a indiqué dans son commentaire, après l'afficher/masquer je fais ceci:

    $('.alt:visible:odd').css('background', '#EBEFF4');
$('.alt:visible:even').css('background', '#FFFFFF');

    Dans mon cas, le réglage de l'arrière-plan cassé mon hover, cela a été résolu avec !important de faire le hover arrière-plan de controle.

    table.grid tr.hover:hover
{
    cursor:pointer;
    background:#D2E0E9 !important;    
}
    • À l'aide !important dans la production environnment n'est pas une bonne habitude à avoir. Si vous vous retrouvez à l'aide !important, cela signifie que la solution peut être un peu plus compliqué, mais il existe. Dans ce cas, vous souhaitez appliquer classes avec jquery afin de toujours être en mesure de planer sans !important : codepen.io/gfra/stylo/nFrEc
    InformationsquelleAutor Andreas
  2. -2

    Une autre option serait d'appliquer une classe pour les éléments visibles lors de cacher les autres. Appliquer nth-child pour cette classe (qui n'est appliquée que sur les éléments visibles.)

    Vous n'avez pas à utiliser un !important balise pour garder votre vol stationnaire-fond dans ce cas.

    InformationsquelleAutor Brenden
  3. -4

    Que vous pouvez faire:

    $('some_selector tr:visible').hide()

    Espère que cette aide

    • Ce n'était pas le cacher c'était mon problème.
    InformationsquelleAutor Edgar Villegas Alvarado