jQuery primero de tipo selector?

¿Cómo puedo seleccionar el primer elemento <p> en el siguiente <div> con jQuery?jQuery primero de tipo selector?

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

Fuente

2011-12-16 Web_Designer

Asumiendo que tienen una referencia a la div ya:

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

Si el primer p siempre habrá un elemento secundario directo de la div, podría utilizar en lugar de childrenfind.

Algunas alternativas incluyen:

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

Tenga en cuenta que el método eq siempre será la manera más rápida de hacer esto. He aquí los resultados de un quick comparison del eq método, selector de :eq y :first selector (No me molesté con el método first ya que es sólo un alias de eq(0)):

enter image description here

Fuente

2011-12-16 07:42:24

Niza, esto parece convincente, gracias! –

No hay problema, me alegro de poder ayudar :) Si está interesado, otra alternativa sería ': lt (1)'. Estoy casi seguro de que será más lento que el método '.eq' también, pero es otra forma de lograr lo mismo. –

Wow, eso es una diferencia significativa. No entiendo por qué jQuery permitiría: primero en absoluto.En el fondo, se debe convertir a: nth-child (1). http://jsperf.com/jq-first-vs-eq/3 ¿Hay alguna razón para que esto no se haga? – rkw

$('div p:first')

respuesta era demasiado corto para publicar sin esta oración inútil.

Editar Esta es definitivamente una opción lenta. Después de observar la prueba de velocidad de Jame, parece que los selectores de jQuery funcionan mejor cuando se alejan de los selectores de css.

Fuente

2011-12-16 07:42:43 rkw

@JamesAllardice Eso es igual a .Primero(), porque ambos coinciden con un solo elemento. Si es el efecto deseado depende del desafío de Web_Designer. – Colin

@Farrell - Sí, es igual a '.first' y': first' y ': eq (0)' y ': lt (1)' (hay tantas maneras de escribir lo mismo con jQuery), pero debería ser el ayuno del grupo. –

@rkw - Tenga en cuenta que ': nth-child' no es equivalente y no funcionará en este caso. Tiene razón al pensar que los selectores funcionan mejor cuando tienen un equivalente CSS, especialmente en navegadores modernos, porque los métodos nativos 'querySelector' y' querySelectorAll' se pueden usar en lugar de Sizzle. –

$('div p').first()

Debería funcionar. Creo.

Fuente

2011-12-16 07:42:47 bdares

$ ("div p") primera();

o $ ('div p: first');

Referencia: http://api.jquery.com/first/

Tenga en cuenta que en primer lugar() coincide sólo con un único elemento, el selector: primero-niño puede coincidir más de uno: uno para cada padre.

Fuente

2011-12-16 07:43:36 Colin

Casi se sabe la respuesta (de su título de la entrada). Hay un selector en jQuery llamado :first-of-type. Usarlo para encontrar y agregar la clase a la primera etiqueta p automáticamente, así:

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

Fuente

2013-05-05 05:28:06 Devner

: primer-de-tipo y: último-de-tipo está disponible desde jQuery 1.9 – Bell

-1

Esto debería funcionar

$("div p:first-of-type").css("font-size: 10px");

El código anterior se encuentra el primer párrafo en el div como @Denver señaló y cambió su fonts-size-10px

Aquí es un ejemplo que explica aún más sobre jQuery first-of-type selector

Fuente

2015-10-26 09:51:21 Packer

No, no debería. Esta respuesta es, en esencia, idéntica a [la dada por Devner hace dos años y medio] (http://stackoverflow.com/a/16381687/19068), excepto que la ha cambiado para seleccionar el elemento incorrecto. – Quentin

¡De acuerdo! y editó el código. Gracias – Packer

Respuesta

Cuestiones relacionadas