javascript - name - selectores jquery avanzados

jQuery primer hijo de “este”

Question

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

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

Javascript:

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

¿Cómo puedo hacer referencia al: primer hijo de elemento?

Answer 1

Acabo de escribir un complemento que utiliza .firstElementChild si es posible, y vuelve 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 bajo Chrome 24 fue un par de órdenes de magnitud más rápido que cualquier otro método basado en el selector jQuery.

Answer 2

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

Answer 3

Has probado

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

Creo que quieres establecer tu elemento como contexto para tu búsqueda. Podría haber una mejor manera de hacer esto que otro gurú de jQuery saltará aquí y te lanzará :)

Answer 4

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 ops / sec - el más rápido
2. notif.children(":first") - 653 ops / sec - 85% más lento
3. notif.children()[0] - 1,416 ops / seg - 67% más lento

Formas nativas:

4. JavaScript nativo '' ele.firstChild - 4,934,323 ops / sec (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 ops / sec

Por lo tanto, no se recomiendan los primeros 3 enfoques de 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, usando la referencia de matriz [0] (recomendado) o .get(0) y use ele.firstChild . Esto da los mismos resultados idénticos que el uso regular de JavaScript.

todas las pruebas se realizan en Chrome Canary versión v15.0.854.0

Answer 5

Por favor, úselo de esta forma. Primero, asigne un nombre de clase para etiquetar p como "myp".

A continuación, utilice el siguiente código

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

Answer 6

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 quiera encontrar el primer descendiente directo del elemento de contexto, por lo tanto, el selector secundario (>). También señala que 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");

Answer 7

Si quieres primer hijo inmediato necesitas

    $(element).first();

Si desea un primer elemento particular en el dominio desde su elemento, entonces use a continuación

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

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

Answer 8

Utilice la función children con el :first selector para obtener el primer element secundario del element :

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

Answer 9

puedes usar DOM

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

Answer 10

element.children().first();

Encuentra a todos los niños y consigue primero de ellos.