jQuery primo figlio di "questo"

Sto cercando di passare "questo" da un intervallo di clic a una funzione jQuery che può quindi eseguire jQuery sul primo figlio dell'elemento selezionato. Non riesco a farlo bene ...

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

Javascript:

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

Come posso fare riferimento a: first-child of element?

Se si desidera applicare un selettore al contesto fornito da un set jQuery esistente, provare la funzione find () :

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

Jørn Schou-Rode ha notato che probabilmente vuoi solo trovare il primo discendente diretto dell'elemento di contesto, quindi il selettore figlio (>). Sottolinea inoltre che è possibile utilizzare la funzione children () , che è molto simile a find () ma cerca solo un livello in profondità nella gerarchia (che è tutto ciò che serve ...):

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

Utilizzare la childrenfunzione con il :firstselettore per ottenere il primo figlio unico di element:

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

Ho aggiunto il test jsperf per vedere la differenza di velocità per diversi approcci per ottenere il primo figlio (totale 1000+ bambini)

dato, notif = $('#foo')

modi jQuery:

1. $(":first-child", notif) - 4.304 ops / sec - più veloce
2. notif.children(":first") - 653 operazioni / sec - 85% più lento
3. notif.children()[0] - 1.416 operazioni / sec - 67% più lento

Modi nativi:

4. JavaScript nativo ' ele.firstChild- 4.934.323 ops / sec (tutti gli approcci precedenti sono più lenti del 100% rispetto a firstChild)
5. Ele DOM nativo di jQery: notif[0].firstChild- 4.913.658 ops / sec

Quindi, i primi 3 approcci jQuery non sono raccomandati, almeno per il primo figlio (dubito che sarebbe così anche per molti altri). Se si dispone di un oggetto jQuery e è necessario ottenere il primo figlio, quindi ottenere l'elemento DOM nativo dall'oggetto jQuery, utilizzando il riferimento di matrice [0] (consigliato) oe .get(0)utilizzare ele.firstChild. Ciò fornisce gli stessi risultati identici del normale utilizzo di JavaScript.

tutti i test vengono eseguiti in Chrome Canary build v15.0.854.0

element.children().first();

Trova tutti i bambini e ottieni prima di loro.

Hai provato

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

Penso che tu voglia impostare il tuo elemento come contesto per la tua ricerca. Potrebbe esserci un modo migliore per farlo che qualche altro guru di jQuery salterà qui e ti lancerà fuori :)

Ho appena scritto un plug-in che utilizza .firstElementChildse possibile e, se necessario, ricorre all'iterazione su ogni singolo nodo:

(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);

Non è veloce come una soluzione DOM pura, ma nei test jsperf con Chrome 24 era un paio di ordini di grandezza più veloce di qualsiasi altro metodo basato su selettori jQuery.

puoi usare DOM

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

Questo può essere fatto con una magia semplice come questa:

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

Riferimento: http://www.snoopcode.com/jquery/jquery-first-child-selector

per favore usalo come questa prima cosa dai un nome di classe per taggare p come "myp"

quindi utilizzare il seguente codice

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

Se vuoi il primo figlio immediato, ti serve

    $(element).first();

Se vuoi un primo elemento particolare nel dom dal tuo elemento, usa di seguito

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

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