javascript selector - jQuery primer hijo de “este”




5 Answers

Si desea aplicar un selector al contexto proporcionado por un conjunto jQuery existente, pruebe la función find () :

element.find(">:first-child").toggleClass("redClass");

Jørn Schou-Rode señaló que probablemente solo quiera encontrar el primer descendiente directo del elemento de contexto, por lo tanto, el selector secundario (>). También señala que podría usar la función children () , que es muy similar a find (), pero solo busca un nivel en la jerarquía (que es todo lo que necesita ...):

element.children(":first").toggleClass("redClass");
examples selectores

Estoy tratando de pasar "esto" de un intervalo pulsado a una función jQuery que luego puede ejecutar jQuery en el primer elemento secundario del elemento pulsado. Parece que no puede hacerlo bien ...

<p onclick="toggleSection($(this));"><span class="redClass"></span></p>

Javascript:

function toggleSection(element) {
  element.toggleClass("redClass");
}

¿Cómo puedo hacer referencia al: primer hijo de elemento?




He agregado la prueba jsperf para ver la diferencia de velocidad para diferentes enfoques para obtener el primer hijo (un total de más de 1000 niños)

dado, notif = $('#foo')

formas jQuery:

  1. $(":first-child", notif) - 4,304 ops / sec - el más rápido
  2. notif.children(":first") - 653 ops / sec - 85% más lento
  3. notif.children()[0] - 1,416 ops / seg - 67% más lento

Formas nativas:

  1. JavaScript nativo ' ele.firstChild - 4,934,323 ops / sec (todos los enfoques anteriores son 100% más lentos en comparación con firstChild )
  2. DOM nativo de jQery: notif[0].firstChild - 4,913,658 ops / sec

Por lo tanto, no se recomiendan los primeros 3 enfoques de jQuery, al menos para el primer hijo (dudo que ese sea el caso con muchos otros también). Si tiene un objeto jQuery y necesita obtener el primer hijo, obtenga el elemento DOM nativo del objeto jQuery, usando la referencia de matriz [0] (recomendado) o .get(0) y use ele.firstChild . Esto da los mismos resultados idénticos que el uso regular de JavaScript.

todas las pruebas se realizan en Chrome Canary versión v15.0.854.0




Has probado

$(":first-child", element).toggleClass("redClass");

Creo que quieres establecer tu elemento como contexto para tu búsqueda. Podría haber una mejor manera de hacer esto que otro gurú de jQuery saltará aquí y te lanzará :)




puedes usar DOM

$(this).children().first()
// is equivalent to
$(this.firstChild)






Related

javascript jquery jquery-selectors css-selectors