jQuery primer hijo de "esto"

Estoy tratando de pasar "esto" de un intervalo de clics a una función jQuery que luego puede ejecutar jQuery en el primer elemento secundario de ese elemento cliqueado. Parece que no puedo hacerlo bien ...

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

Javascript:

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

¿Cómo hago referencia al elemento: first-child of?

Si desea aplicar un selector al contexto proporcionado por un conjunto jQuery existente, pruebe la función find () :

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

Jørn Schou-Rode señaló que probablemente solo desee encontrar el primer descendiente directo del elemento de contexto, de ahí el selector secundario (>). También señala que también podría usar la función children () , que es muy similar a find () pero solo busca un nivel en la jerarquía (que es todo lo que necesita ...):

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

Use la childrenfunción con el :firstselector para obtener el primer hijo único de element:

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

He agregado la prueba jsperf para ver la diferencia de velocidad para diferentes enfoques para obtener el primer hijo (un total de más de 1000 niños)

dado, notif = $('#foo')

Formas jQuery:

1. $(":first-child", notif) - 4,304 operaciones / seg - más rápido
2. notif.children(":first") - 653 operaciones / seg. - 85% más lento
3. notif.children()[0] - 1,416 operaciones / seg. - 67% más lento

Maneras nativas:

4. JavaScript nativo ' ele.firstChild: 4.934.323 operaciones / segundo (todos los enfoques anteriores son 100% más lentos en comparación con firstChild)
5. DOM nativo de jQery: notif[0].firstChild- 4,913,658 operaciones / seg.

Por lo tanto, no se recomiendan los primeros 3 enfoques jQuery, al menos para el primer hijo (dudo que ese sea el caso con muchos otros también). Si tiene un objeto jQuery y necesita obtener el primer hijo, obtenga el elemento DOM nativo del objeto jQuery, utilizando la referencia de matriz [0] (recomendado) o .get(0)use el ele.firstChild. Esto proporciona los mismos resultados idénticos que el uso regular de JavaScript.

todas las pruebas se realizan en Chrome Canary build v15.0.854.0

element.children().first();

Encuentre a todos los niños y obtenga el primero de ellos.

Has probado

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

Creo que desea establecer su elemento como contexto para su búsqueda. Puede haber una mejor manera de hacer esto que algún otro gurú de jQuery saltará aquí y te arrojará :)

Acabo de escribir un complemento que usa .firstElementChildsi es posible, y recurre a iterar sobre cada nodo individual si es necesario:

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

No es tan rápido como una solución DOM pura, pero en las pruebas jsperf en Chrome 24 fue un par de órdenes de magnitud más rápido que cualquier otro método basado en el selector jQuery.

puedes usar DOM

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

Esto se puede hacer con una magia simple como esta:

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

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

úsalo como esto primero, dale un nombre de clase a la etiqueta p como "myp"

luego en usar el siguiente código

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

Si quieres un primer hijo inmediato, necesitas

    $(element).first();

Si desea un primer elemento particular en el dom de su elemento, use a continuación

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

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