web-dev-qa-db-fra.com

jQuery premier sélecteur de type?

Comment sélectionner le premier élément <p> dans le <div> suivant avec jQuery?

<div>
    <h1>heading</h1>
    <p>How do I select this element with jQuery?</p>
    <p>Another paragraph</p>
</div>
javascriptjqueryjquery-selectors
26
Web_Designer

En supposant que vous ayez déjà une référence à la div:

$(yourDiv).find("p").eq(0);

Si la première p sera toujours un enfant direct de la div, vous pouvez utiliser children au lieu de find.

Certaines alternatives incluent:

$(yourDiv).find("p:eq(0)"); //Slower than the `.eq` method
$(yourDiv).find("p:first"); 
$(yourDiv).find("p").first() //Just an alias for `.eq(0)`

Notez que la méthode eq sera toujours le moyen le plus rapide de le faire. Voici les résultats d'une comparaison quick de la méthode eq, du sélecteur :eq et du sélecteur :first (je ne me suis pas soucié de la méthode first puisqu'il s'agit simplement d'un alias de eq(0)):

enter image description here

55
James Allardice
$('div p:first')

la réponse était trop courte pour être publiée sans cette phrase inutile.

Edit C’est définitivement une option lente. Après avoir examiné le test de vitesse de Jame, il semble que les sélecteurs jQuery fonctionnent mieux quand ils se superposent aux sélecteurs css.

6
rkw

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

ou $ ('div p: premier');

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

N'oubliez pas que first () ne correspond qu'à un seul élément, le sélecteur: first-child peut en rechercher plus d'un: un pour chaque parent. 

2
Colin

Vous connaissez presque la réponse (d'après le titre de votre message). Il existe un sélecteur dans jQuery appelé :first-of-type. Utilisez-le pour rechercher et ajouter automatiquement une classe à la première balise p, comme ceci:

$("div p:first-of-type").addClass('someClass');
1
Devner
$('div p').first()

Devrait marcher. Je pense.

0
bdares