jQuery d'abord le sélecteur de type?

Comment puis-je sélectionner le premier <p> élément dans la suite de <div> avec jQuery?

<div>
    <h1>heading</h1>
    <p>How do I select this element with jQuery?</p>
    <p>Another paragraph</p>
</div>

InformationsquelleAutor Web_Designer | 2011-12-16

57

En supposant que vous avez une référence à la div déjà:
```
$(yourDiv).find("p").eq(0);
```
Si le premier p sera toujours un enfant direct de l' div, vous pouvez utiliser children au lieu de find.

Certaines solutions de rechange comprennent:
```
$(yourDiv).find("p:eq(0)"); //Slower than the `.eq` method
$(yourDiv).find("p:first"); 
$(yourDiv).find("p").first() //Just an alias for `.eq(0)`
```
Noter que le eq méthode sera toujours le moyen le plus rapide pour ce faire. Voici les résultats d'une comparaison rapide de la eq méthode, :eq sélecteur et :first sélecteur (je n'ai pas pris la peine avec le first méthode, car c'est juste un alias de eq(0)):
- Nice, cela semble convaincant, Merci!
- Pas de problème, content d'avoir pu aider 🙂 Si vous êtes intéressés, encore une autre alternative serait :lt(1). Je suis presque certain qu'il sera plus lent que le .eq méthode de trop, mais c'est encore une autre façon de réaliser la même chose.
- Wow, c'est une différence importante. Je ne comprends pas pourquoi jQuery permettrait :d'abord à tous. Dans le fond, il doit être converti à :nth-child(1). jsperf.com/jq-first-vs-eq/3 Est-il une raison pour laquelle cela n'est pas fait?
- fait quelque chose de très différent. Il retourne l'élément à l'index spécifié (1, juste pour ajouté de la confusion!) s'il correspond au sélecteur. Dans votre jsperf test, le :nth-child exemple ne correspond pas à l'un des éléments - le premier élément est un h2, pas un p. Je crois que, derrière les coulisses, :first est converti à :eq(0), ce qui est indiqué dans mon premier test.
- ah, merci. Maintenant je sais pourquoi les gens continuent à demander à propos de nth-of-type de sélecteurs de jquery.
- Oui, le nom est un peu trompeur, mais je ne sais pas quoi d'autre ils pourraient être appelé vraiment. Quand les gens demandent pour un "nth-of-type" sélecteur, la réponse est :eq(n), mais l'équivalent .eq(n) méthode est plus rapide.
- J'aime vraiment l'eq() de la solution, il est très lisible et sera celui que je vais utiliser à partir d'ici. Découvrez ces résultats, cependant, utilise nth-of-type et le premier du type: jsperf.com/jq-first-vs-eq/3
- Nice! Bonne découverte. Je ne savais pas qu'on pouvait utiliser :nth-of-type et la comme avec jQuery.
- Je n'ai pas non plus jusqu'à que je l'ai essayé. Il n'est pas dans la documentation, peut-être que jQuery transmet simplement le sélecteur de ligne droite à travers si ce n'est pas la reconnaître? Aussi, je ne pense pas que c'est se comporter de la façon dont je suis l'attend. Exemple: sur cette page, si vous tapez $('div:first-of-type") dans la console, vous obtiendrez plus de 70 résultats. Je m'attendais à un.
- Ah, la première de type est conçu pour être utilisé avec un parent. Il prend tout son sens maintenant. w3.org/TR/selectors/#first-of-type-pseudo
- Sans doute intéressant de noter que :first-of-type et les ne fonctionnent que dans les navigateurs qui prennent en charge querySelectorAll. Les navigateurs plus anciens (en particulier IE8 et ci-dessous) lèvera une erreur, et c'est probablement préférable de s'en tenir à eq.
- Merci les gars! - intruiging disgussion. 🙂
InformationsquelleAutor James Allardice
6
```
$('div p:first')
```
réponse a été trop court pour poster sans cette phrase inutile.

Modifier
C'est certainement une option plus longue. Après avoir regardé Jame du test de vitesse, ça ressemble à des sélecteurs jQuery fonctionnent mieux lorsqu'elles piggy back-off de sélecteurs css.
- C'est égal .First(), parce que les deux correspond à un seul élément. Si c'est l'effet désiré dépend Web_Designer du défi.
- Oui, il est égal à .first et :first et :eq(0) et :lt(1) (il y a tellement de façons d'écrire la même chose avec jQuery), mais il devrait être le jeun de la grappe.
- Notez que :nth-child n'est pas équivalent et ne fonctionne pas dans ce cas. Vous êtes en droit de penser que les sélecteurs fonctionnent mieux quand ils ont une CSS équivalent, en particulier dans les navigateurs modernes, parce que le natif querySelector et querySelectorAll méthodes peuvent être utilisées au lieu de Grésillement.
InformationsquelleAutor rkw
2

$("div " p").first();

ou $('div p:first');

Référence: http://api.jquery.com/first/

Garder à l'esprit que la première() ne correspond qu'à un seul élément :first-sélecteur d'enfant peut correspondre à plusieurs: un pour chaque parent.

InformationsquelleAutor Colin
1

Vous près de savoir la réponse (à partir de votre titre du post). Il y a un sélecteur jQuery appelé :first-of-type. L'utiliser pour rechercher et ajouter une classe à la première balise p automatiquement, comme suit:
```
$("div p:first-of-type").addClass('someClass');
```
- :first-of-type et :last-of-type est disponible depuis jQuery 1.9
InformationsquelleAutor Devner
0
```
$('div p').first()
```
Devrait fonctionner. Je pense qu'.

InformationsquelleAutor bdares
-1

Cela devrait fonctionner
```
$( "div p:first-of-type" ).css( "font-size: 10px" );
```
Le code ci-dessus trouve le premier paragraphe de la div comme @Denver relevé et a changé son fonts-size à 10px

Voici un exemple qui explique encore plus sur jQuery, le premier du sélecteur de type de
- Non, il ne devrait pas. Cette réponse est, en substance, identique à celui donné par Devner deux ans et demi sauf que vous l'avez modifié pour sélectionner le mauvais élément.
- D'accord! et à l'édition de code. Merci
InformationsquelleAutor Prabhakar

Vous devez vous connecter pour publier un commentaire.