web-dev-qa-db-fra.com

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 pourrais-je faire cela sans affecter une classe css aux lignes pour les identifier. Je reçois tout sauf la première rangée actuellement avec

$("#id").find("tr:gt(0)")

j'ai besoin de combiner cela avec not("tr:last") en quelque sorte peut-être?

jqueryjquery-selectors
52
user210757

Supprimez la gt(), car je suppose que c'est un tout petit peu plus lent que :first.

Utilisez 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 table s'il est manquant, c'est pourquoi le sélecteur immédiat d'enfants échouait - il n'y avait aucun élément <tr> En tant qu'enfant immédiat dans le <table> tag.

Je ne suis pas sûr à 100% que c'est la façon dont tous les navigateurs le font, il serait donc plus sûr d'ajouter simplement le <tbody> Manuellement. Sinon, vous avez besoin d'un peu de reniflement et ne pouvez pas le faire comme une doublure:

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 ceci résoudra votre problème!

97
Tatu Ulmanen

Essaye ça:

.not(':first').not(':last')
14
mikkelz

pourquoi pas juste ça?

$('table tr:not(:first-child):not(:last-child)');

fonctionne également comme un sélecteur CSS pur.

12
ProblemsOfSumit

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, uniquement en tant que sélecteur jQuery. Pour du CSS pur, vous devez utiliser la réponse de @ Sumit.

4
GreeKatrina

Vous pouvez également utiliser la méthode .slice() pour supprimer les premiers/derniers éléments de l'ensemble:

$('table tr').slice(1, -1);

La méthode .slice() crée essentiellement un nouvel objet jQuery avec un sous-ensemble des éléments spécifiés dans l'ensemble initial. Dans ce cas, il exclura les éléments avec un index de 1 Et -1, Qui sont respectivement le premier/dernier élément.

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 En utilisant :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>
2
Josh Crozier

Étrange, les suggestions publiées n'ont pas fonctionné, elles devraient toutes fonctionner! MAIS...

Si cela n'a pas fonctionné, faites-le de cette façon .... un peu plus lent mais DOIT FONCTIONNER !! ESSAYER:

$('table#tbl tr').addClass('highlight');
$('table#tbl tr:first-child').removeClass('highlight');
$('table#tbl tr:last-child').removeClass('highlight');
2
Stuart G