web-dev-qa-db-fra.com

Comment sélectionner le nième élément du même type

Je voudrais sélectionner le nième td parmi tous les td, comment faire?

Je sais que je peux le faire avec document.querySelectorAll("td")[nth], mais je suis à la recherche d'une méthode CSS pure.

J'ai essayé document.querySelectorAll("td:nth-child(77)"), mais il ne donne pas le résultat comme document.querySelectorAll("td")[77] le fait.

javascriptcssdomcss-selectors
9
tfchen

Je sais que je peux le faire avec document.querySelectorAll("td")[nth], mais je suis à la recherche d'une méthode CSS pure.

Il n'y a pas d'équivalent CSS pur. Voir Correspondance avec le premier/nième élément d'un certain type dans tout le document

11
BoltClock
var result = document.querySelectorAll("table td:nth-of-type(2)");

console.log(result);
<table>
  <tr><td>nope</td><td>nope</td></tr>
  <tr><td>nope</td><td>here</td></tr>
  
</table>

UP. L'extrait montre que vous ne pouvez pas sélectionner les éléments TD globalement, mais vous pouvez obtenir le nième élément td dans un TR donné. Est-ce ce que vous recherchez?

il y a le sélecteur :nth-of-type(77)

devrait vous aider.

Le sélecteur nth-child Compte tous les enfants de l'élément donné, y compris les autres types de balises. Le sélecteur css compte également à partir de 1, lorsque JS querySelector résultat array à partir de 0

20
Kejt

Il existe un chemin css pur nommé ==>: nth-of-type
Par exemple, pour sélectionner le 77e élément td de chaque parent dans le document, la syntaxe est

td:nth-of-type(77)

Pour plus d'informations sur le sélecteur: nth-of-type, consultez le réseau de développeurs Morzilla si ces liens se brisent, faites-le moi savoir dans un commentaire ci-dessous.

// Pour l'élément lui-même, voir //
https://developer.mozilla.org/nl/docs/Web/CSS/:nth-of-type

// Pour la syntaxe de toutes les sélections que vous pouvez effectuer avec: nth-child et: nth-of-type, voir // https://developer.mozilla.org/en-US/docs/Web/CSS/ : nième enfant

0
Armaniimus