web-dev-qa-db-fra.com

jQuery premier enfant de "this"

J'essaie de passer "ceci" d'une étendue cliquée à une fonction jQuery qui peut ensuite exécuter jQuery sur le premier enfant de cet élément cliqué. Je ne peux pas sembler bien faire les choses ...

<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?

javascriptjqueryjquery-selectorscss-selectors
300
macca1

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 de contexte, donc le sélecteur d'enfant (>). Il fait également remarquer 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 (qui c'est tout ce dont vous avez besoin ...):

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

Utilisez la fonction children avec le sélecteur :first) pour obtenir le single de element:

element.children(":first").toggleClass("redClass");
70
Jørn Schou-Rode

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

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

jQuery façons:

  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/s - 67% plus lent

Manières natives:

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

Donc, les 3 premières approches jQuery ne sont pas recommandées, du moins pour le premier enfant (je doute que ce soit le cas de beaucoup d’autres aussi). Si vous avez un objet jQuery et que vous devez obtenir le premier-enfant, alors obtenez l'élément DOM natif à partir de l'objet jQuery, à l'aide de la référence de tableau [0] (recommandé) ou .get(0) et utilisez le ele.firstChild. Cela donne les mêmes résultats que l’utilisation régulière de JavaScript.

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

49
manikanta
element.children().first();

Trouvez tous les enfants et obtenez le premier d'entre eux.

13
Bishal Paudel

As-tu essayé

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

Je pense que vous souhaitez définir votre élément comme un contexte pour votre recherche. Il y a peut-être une meilleure façon de le faire, ce qu'un autre gourou de jQuery sautera ici et vous jettera :)

9
theIV

Je viens d'écrire un plugin qui utilise .firstElementChild si 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 tests jsperf sous Chrome 24, il était de deux ordres de grandeur plus rapide que toute autre méthode basée sur le sélecteur jQuery.

4
Alnitak

vous pouvez utiliser DOM

$(this).children().first()
// is equivalent to
$(this.firstChild)
2
Yukulélé

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

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

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

2
Prabhakar

s'il vous plaît utilisez-le comme cette première chose donne un nom de classe pour taguer p comme "myp"

puis utilisez le code suivant

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