JQuery équivalent à des prototypes vers le bas () - fonction

Question

Je suis un portage webapp du prototype à jquery dans lequel j'ai souvent utilisé le prototype fonction vers le bas (). (Sélection du premier enfant d'un élément donné)

sur une Jetant JQuery-api des façons de le faire serait:

prototype: $ ( 'abc') vers le bas ();. jquery: $ ( 'abc') enfants () premier ();..

Cependant, depuis ce premier fetch tous les enfants et applique un filtre aferwards, je doute qu'il est efficace pour ce cas d'utilisation.

Quelle est une façon meilleure?

Answer 1

Vous pouvez étendre jQuery, et ajouter une fonction down() comme ceci:

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

De cette façon, vous n'avez pas à quoi que ce soit le changement dans votre code.

Vous pouvez voir ce live .
vous pouvez également afficher une performance comparisson jsPerf .
Il montre que c'est plus rapide que les méthodes présentées dans les autres réponses (qui sont de 40% à 70% plus lent).

EDIT: Une autre version adaptée de la mise en œuvre du prototype réel. Ceci est encore plus rapide (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

Il y a deux manières, vous pouvez le faire.

En premier lieu, cette retourne un tableau contenant un seul élément.

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

Notez également ceci est une version plus lisible $('form').children(":eq(0)");

En second lieu, ce rendement que l'élément extrait du tableau

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

Ou si vous savez quel type d'élément de votre après (plutôt que le premier enfant quel que soit le type d'élément), vous pouvez utiliser:

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

Enfin, si vous ne strictement pas besoin de l'élément par rapport à son parent, vous pouvez simplement accéder directement à l'aide d'un sélecteur CSS3:

$("input:first");

Je soupçonne que cette dernière option est la plus effiecent si vous pouvez vous en sortir avec elle. Mais si quelqu'un a plus à dire au sujet de l'efficacité, je voudrais l'entendre.

Answer 3

essayer:

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