Solución:
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 desee encontrar el primero descendiente directo del elemento de contexto, de ahí el selector secundario (>). También señala que también podría usar la función children (), que es muy similar a find () pero solo busca un nivel profundo en la jerarquía (que es todo lo que necesita …):
element.children(":first").toggleClass("redClass");
Utilizar el children funcionar con el :first selector para obtener el soltero primer hijo de element:
element.children(":first").toggleClass("redClass");
Agregué 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 de jQuery:
-
$(":first-child", notif)– 4.304 operaciones / seg – el más rápido -
notif.children(":first")– 653 operaciones / seg – 85% más lento -
notif.children()[0]– 1.416 operaciones / seg – 67% más lento
Formas nativas:
- JavaScript nativo ‘
ele.firstChild– 4.934.323 ops / seg (todos los enfoques anteriores son 100% más lentos en comparación confirstChild) - DOM nativo ele de jQery:
notif[0].firstChild– 4.913.658 operaciones / seg
Por lo tanto, los primeros 3 enfoques de jQuery no se recomiendan, al menos para el primer hijo (dudo que ese sea el caso de muchos otros también). Si tiene un objeto jQuery y necesita obtener el primer hijo, entonces obtener el elemento DOM nativo desde el objeto jQuery, usando una referencia de matriz [0] (recomendado) o .get(0) y usa el ele.firstChild. Esto da los mismos resultados idénticos que el uso regular de JavaScript.
todas las pruebas se realizan en Chrome Canary build v15.0.854.0