JQuery-equivalente a prototipos Down() - función

Question

Estoy portando una aplicación web de prototipo a jquery en la que a menudo utilicé la función de prototipo Down(). (Seleccionando el primer hijo de un elemento dado)

Mirando por encima del JQuery-api una de las maneras de hacer esto sería:

prototipo: $ ('abc') hacia abajo();. jquery: $ ('abc'). Children(). First();

Sin embargo, dado que este primero atrapa a todos los niños y aplica un filtro más adelante, dudo que sea eficiente para este caso de uso.

¿Cuál es la mejor manera?

Answer 1

Se puede extender jQuery, y añadir una función down() así:

(function($) { 
    $.fn.down = function() { 
    return $(this[0] && this[0].children && this[0].children[0]); 
    }; 
})(jQuery); 

De esta manera usted no tiene que cambiar nada en el código.

Puedes ver esto en vivo jsFiddle example. También puede ver una comparación de rendimiento en jsPerf.
Muestra que esto es más rápido que los métodos presentados en las otras respuestas (que son de 40% a 70% más lentos).

EDIT:
Una versión alternativa adaptada de la implementación real prototipo. Esto es aún mayor (25%)

(function($) { 
    $.fn.down = function() { 
    var el = this[0] && this[0].firstChild; 
    while (el && el.nodeType != 1) 
     el = el.nextSibling; 
    return $(el); 
    }; 
})(jQuery); 

Answer 2

intento:

$('abc').children(":eq(0)") 

Answer 3

Hay un par de maneras de hacer esto.

Primero, esto devuelve una matriz que contiene un solo elemento.

$('form').children().first(); 

También tenga en cuenta que esto es una versión más fácil de $('form').children(":eq(0)");

En segundo lugar, esto devuelve sólo el elemento extraído de la matriz

$('form').children()[0]; 

O si usted sabe qué tipo de elemento de tu después (en lugar de sólo primer hijo independientemente del tipo de elemento) que puede utilizar:

$('form').find("input:first"); 

Por último, si usted no necesita el elemento estrictamente relacionada con su padre, sólo puede acceder a él directamente a través de un selector CSS3:

$("input:first"); 

Sospecho que esta última opción es la más eficaz si puedes salirte con la tuya. Pero si alguien tiene más que decir acerca de la eficiencia, me gustaría escucharlo.