jQuery primeiro filho de "this"

Eu estou tentando passar "this" de um período clicado para uma função jQuery que pode executar o jQuery no primeiro filho desse elemento clicado. Não consigo acertar ...

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

Javascript:

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

Como faço para referenciar o: primeiro filho do elemento?

Se você deseja aplicar um seletor ao contexto fornecido por um conjunto jQuery existente, tente a função find () :

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

Jørn Schou-Rode observou que você provavelmente só deseja encontrar o primeiro descendente direto do elemento de contexto, daí o seletor filho (>). Ele também aponta que você também pode usar a função children () , que é muito semelhante a find (), mas apenas pesquisa um nível profundo na hierarquia (que é tudo que você precisa ...):

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

Use a childrenfunção com o :firstseletor para obter o primeiro filho único de element:

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

Eu adicionei JSPerf teste para ver a diferença de velocidade para diferentes abordagens para obter o primeiro filho (total 1000 crianças)

dado, notif = $('#foo')

Maneiras jQuery:

1. $(":first-child", notif) - 4.304 ops / s - mais rápido
2. notif.children(":first") - 653 ops / s - 85% mais lento
3. notif.children()[0] - 1.416 ops / s - 67% mais lento

Maneiras nativas:

4. JavaScript nativo ' ele.firstChild- 4.934.323 ops / s (todas as abordagens acima são 100% mais lentas em comparação com firstChild)
5. Ele DOM nativo do jQery: notif[0].firstChild- 4.913.658 ops / s

Portanto, as três primeiras abordagens do jQuery não são recomendadas, pelo menos para o primeiro filho (duvido que seja o caso de muitas outras também). Se você tiver um objeto jQuery e precisar obter o primeiro filho, obtenha o elemento DOM nativo do objeto jQuery, usando a referência de matriz [0] (recomendado) ou .get(0)use o ele.firstChild. Isso fornece os mesmos resultados idênticos aos do uso regular do JavaScript.

todos os testes são feitos no Chrome Canary build v15.0.854.0

element.children().first();

Encontre todas as crianças e obtenha primeiro.

Você tentou

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

Eu acho que você deseja definir seu elemento como um contexto para sua pesquisa. Pode haver uma maneira melhor de fazer isso, que algum outro guru do jQuery entrará aqui e jogará fora em você :)

Acabei de escrever um plugin que usa, .firstElementChildse possível, e volta a iterar sobre cada nó individual, se necessário:

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

Não é tão rápido quanto uma solução DOM pura, mas nos testes do jsperf no Chrome 24, foram duas ordens de magnitude mais rápidas do que qualquer outro método baseado no seletor do jQuery.

você pode usar o DOM

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

Isso pode ser feito com uma mágica simples como esta:

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

Referência: http://www.snoopcode.com/jquery/jquery-first-child-selector

use-o como esta primeira coisa, dê um nome de classe para marcar p como "myp"

em seguida, use o seguinte código

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

Se você quer o primeiro filho imediato, precisa

    $(element).first();

Se você deseja um primeiro elemento específico no dom do seu elemento, use abaixo

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

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