jQuery-récupère toutes les lignes sauf la première et la dernière
Je veux ajouter dynamiquement une classe à toutes les lignes d'une table sauf la première et la dernière ligne. comment ferais-je cela sans affecter une classe css aux lignes pour les identifier. Je reçois tout sauf la première ligne actuellement avec
$("#id").find("tr:gt(0)")
Je dois combiner cela avec not("tr:last") en quelque sorte peut-être?
6 réponses
Déposez le gt(), car je suppose que c'est un peu plus lent que :first.
Utiliser not() conjointement avec :first et :last:
$('table#tbl > tbody > tr').not(':first').not(':last').addClass('highlight');
La plupart des navigateurs ajoutent automatiquement un élément tbody dans le balisage de la table si cela est manquant, c'est pourquoi le sélecteur immediate children a échoué – il n'y avait pas d'Éléments <tr> comme enfants immédiats à la balise <table>.
Je ne suis pas sûr à 100% que ce soit la façon dont tous les navigateurs le font, il serait donc plus sûr d'ajouter le <tbody> manuellement. Sinon, vous avez besoin d'un peu de reniflement et ne pouvez pas le faire comme un one liner:
if($('table#tbl > tbody').size() > 0) {
$('table#tbl > tbody > tr').not(':first').not(':last').addClass('highlight');
} else {
$('table#tbl > tr').not(':first').not(':last').addClass('highlight');
}
J'espère que cela résoudra votre problème!
Pourquoi pas juste ça?
$('table tr:not(:first-child):not(:last-child)');
Fonctionne aussi comme sélecteur CSS pur.
Vous pouvez combiner les méthodes .not() en une seule en séparant les sélecteurs par des virgules:
$('#id tr').not(':first, :last');
$('#id tr:not(:first, :last');
Notez que le second n'est pas valide en CSS pur, seulement en tant que sélecteur jQuery. Pour CSS pur, vous devrez utiliser la réponse de @Sumit.
Étrange les suggestions postées n'ont pas fonctionné, elles devraient toutes fonctionner! MAIS...
Si cela n'a pas fonctionné, faites-le de cette façon.... légèrement plus lent mais doit fonctionner!! Essayez:
$('table#tbl tr').addClass('highlight');
$('table#tbl tr:first-child').removeClass('highlight');
$('table#tbl tr:last-child').removeClass('highlight');
, Vous pouvez également utiliser l'.slice() méthode pour supprimer le premier/le dernier élément de l'ensemble:
$('table tr').slice(1, -1);
Le .slice() méthode, essentiellement, crée un nouvel objet jQuery avec un sous-ensemble des éléments spécifiés dans la configuration initiale. Dans ce cas, il exclura les éléments avec un index de 1 et -1, qui sont respectivement les premiers/derniers éléments.
Exemple:
$('table tr').slice(1, -1).css('background-color', '#f00');table { width: 100%; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td>1</td></tr><tr><td>2</td></tr>
<tr><td>3</td></tr><tr><td>4</td></tr>
<tr><td>5</td></tr><tr><td>6</td></tr>
</table>Bien sûr, vous pouvez également annuler :first-child/:last-child à l'aide de :not():
$('table tr:not(:first-child):not(:last-child)').css('background-color', '#f00');table { width: 100%; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td>1</td></tr><tr><td>2</td></tr>
<tr><td>3</td></tr><tr><td>4</td></tr>
<tr><td>5</td></tr><tr><td>6</td></tr>
</table>, Vous pouvez également combiner :nth-child(n+2) et :nth-last-child(n+2):
$('table tr:nth-child(n+2):nth-last-child(n+2)').css('background-color', '#f00');table { width: 100%; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td>1</td></tr><tr><td>2</td></tr>
<tr><td>3</td></tr><tr><td>4</td></tr>
<tr><td>5</td></tr><tr><td>6</td></tr>
</table>