jQuery, premier enfant de "this".

Question

J'essaie de passer "this" d'un span cliqué à une fonction jQuery qui peut ensuite exécuter jQuery sur le premier enfant de cet élément cliqué. Je n'arrive pas à le faire correctement...

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

Javascript :

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

Comment référencer l'élément :first-child ?

Answer 1

Si vous souhaitez appliquer un sélecteur au contexte fourni par un ensemble jQuery existant, essayez l'option fonction find() :

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

Jørn Schou-Rode a fait remarquer que vous ne voulez probablement trouver que le premier descendant direct de l'élément de contexte, d'où le sélecteur d'enfant (>). Il souligne également que vous pourriez tout aussi bien utiliser le fonction children() qui est très similaire à find() mais ne recherche qu'à un niveau de profondeur dans la hiérarchie (ce qui est tout ce dont vous avez besoin...) :

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

Answer 2

Utilisez le children fonction avec le :first sélecteur pour obtenir le simple premier enfant de element :

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

Answer 3

J'ai ajouté jsperf test pour voir la différence de vitesse pour différentes approches pour obtenir le premier enfant (total 1000+ enfants)

donné, notif = $('#foo')

Les moyens de jQuery :

1. $(":first-child", notif) - 4 304 ops/sec - le plus rapide
2. notif.children(":first") - 653 ops/sec - 85% plus lent
3. notif.children()[0] - 1 416 ops/sec - 67% plus lent

Moyens indigènes :

4. JavaScript natif ele.firstChild - 4,934,323 ops/sec (toutes les approches ci-dessus sont 100% plus lentes par rapport à firstChild )
5. DOM ele natif de jQery : notif[0].firstChild - 4,913,658 ops/sec

Ainsi, les 3 premières approches de jQuery ne sont pas recommandées, au moins pour le premier enfant (je doute que ce soit le cas pour beaucoup d'autres aussi). Si vous avez un objet jQuery et que vous avez besoin d'obtenir le premier enfant, alors obtenir l'élément DOM natif de l'objet jQuery, en utilisant la référence du tableau [0] (recommandé) o .get(0) et utiliser le ele.firstChild . Cela donne les mêmes résultats que l'utilisation normale de JavaScript.

tous les tests sont effectués dans Chrome Canary build v15.0.854.0

Answer 4

Avez-vous essayé

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

Je pense que vous voulez définir votre élément comme un contexte pour votre recherche. Il existe peut-être une meilleure façon de procéder, qu'un autre gourou de jQuery viendra vous présenter :)

Answer 5

Je viens d'écrire un plugin qui utilise .firstElementChild si possible, et revient à l'itération sur chaque nœud individuel si nécessaire :

(function ($) {
    var useElementChild = ('firstElementChild' in document.createElement('div'));

    $.fn.firstChild = function () {
        return this.map(function() {
            if (useElementChild) {
                return this.firstElementChild;
            } else {
                var node = this.firstChild;
                while (node) {
                    if (node.type === 1) {
                        break;
                    }
                    node = node.nextSibling;
                }
                return node;
            }
        });
    };
})(jQuery);

Ce n'est pas aussi rapide qu'une solution DOM pure, mais en tests jsperf Sous Chrome 24, il était plus rapide de quelques ordres de grandeur que toute autre méthode basée sur un sélecteur jQuery.