jQuery premier enfant de «this»

J'essaye de passer "ceci" d'une étendue cliquée à une fonction jQuery qui peut ensuite exécuter jQuery sur le premier enfant de l'élément cliqué. Je n'arrive pas à faire les choses correctement ...

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

Javascript:

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

Comment référencer le: premier enfant de l'élément?

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

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

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

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

Utilisez la childrenfonction avec le :firstsélecteur pour obtenir le premier enfant unique de element:

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

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

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

jQuery façons:

1. $(":first-child", notif) - 4304 ops / sec - le plus rapide
2. notif.children(":first") - 653 ops / sec - 85% plus lent
3. notif.children()[0] - 1416 opérations / sec - 67% plus lent

Voies natives:

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

Ainsi, les 3 premières approches jQuery ne sont pas recommandées, du 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 devez obtenir le premier enfant, récupérez l'élément DOM natif de l'objet jQuery, en utilisant la référence de tableau [0] (recommandé) ou .get(0)et utilisez le ele.firstChild. Cela donne les mêmes résultats identiques que l'utilisation régulière de JavaScript.

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

element.children().first();

Trouvez tous les enfants et prenez le premier.

As-tu essayé

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

Je pense que vous voulez définir votre élément comme contexte pour votre recherche. Il pourrait y avoir une meilleure façon de le faire qu'un autre gourou de jQuery va sauter ici et vous lancer :)

Je viens d'écrire un plugin qui utilise .firstElementChildsi possible, et revient à itérer 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 dans les tests jsperf sous Chrome 24, c'était deux fois plus rapide que toute autre méthode basée sur le sélecteur jQuery.

vous pouvez utiliser DOM

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

Cela peut être fait avec une magie simple comme celle-ci:

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

Référence: http://www.snoopcode.com/jquery/jquery-first-child-selector

veuillez l'utiliser comme cette première chose donnez un nom de classe à la balise p comme "myp"

puis utiliser le code suivant

$(document).ready(function() {
    $(".myp").click(function() {
        $(this).children(":first").toggleClass("classname"); // this will access the span.
    })
})

Si vous voulez un premier enfant immédiat dont vous avez besoin

    $(element).first();

Si vous voulez un premier élément particulier dans le dom de votre élément, utilisez ci-dessous

    var spanElement = $(elementId).find(".redClass :first");
    $(spanElement).addClass("yourClassHere");

essayez: http://jsfiddle.net/vgGbc/2/