Estoy tratando de pasar de «este» desde hace clic en un grupo a una función jQuery que podemos ejecutar jQuery en la que hizo clic en el elemento del primer hijo. Parece que no puede conseguir lo correcto…

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

Javascript:

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

¿Cómo hago referencia a la :primer hijo de elemento?

  • Si estás usando jQuery, ¿por qué no se unen los controladores de eventos con jQuery también?
  • debido a que se unen a los controladores de eventos tienen que ser inicializadas en el documento.ready (), que añade un impacto en el rendimiento (esta es una aplicación para IE6). o hay otra manera?
  • Hm.. no sé. De unión con jQuery es la forma estándar (si ya estás usando jQuery). ¿Qué tipo de impacto en el rendimiento estás experimentando cuando se utiliza jQuery(document).ready(...)?
  • Es una gran aplicación con 7+ desarrolladores. Originalmente fue de 4 segundos antes de que yo traté de limpiar un poco. Por eso prefiero evitar la adición de más cuando no tengo 🙂
InformationsquelleAutor macca1 | 2010-02-16

10 Comentarios

  1. 460

    Si desea aplicar un selector para el contexto proporcionado por una ya existente jQuery, intenta hacer el encontrar() :

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

    Jørn Schou-Montó señalar que, probablemente, sólo quieren encontrar el primer descendiente directo del elemento de contexto, por lo tanto el selector de hijo (>). Asimismo, señala que usted puede utilizar el los niños() función, que es muy similar a la de find (), pero sólo se busca un nivel de profundidad en la jerarquía (que es todo lo que necesita…):

    element.children(":first").toggleClass("redClass");
    • gracias! funciona a la perfección. Me imagino que las otras maneras que se indican a continuación te funcione tan bien.
    • Creo find() busca a través de todos los descendientes, y :first-child puede coincidir con uno de los elementos por los padres. Por lo tanto, esta consulta puede es probable que vuelva a varios elementos. O estoy equivocada?
    • usted está en lo correcto, yo no había pensado en esto – si es que hay una jerarquía, un rotundo :primero.-selector de hijo va a producir varios resultados.
    • Sé que esto es una vieja pregunta/respuesta, pero el uso de la «>» selector sin un padre en el que el selector se deprecia (por ejemplo, «>:firstchild») como de jQuery 1.8. Yo sugiero que en vez de usar element.children(":first-child") o element.children().first();
    • al parecer, decidieron que no van a dejar de usar después de todo
    • el mejor enfoque sería NO para iterar sobre todos los elementos y, a continuación, escoja el primero, como algunos han sugerido aquí. Esto sería MALO.

  2. 49

    He añadido jsperf prueba para ver la diferencia de velocidad para los diferentes enfoques para conseguir el primer hijo (un total de 1000+ niños)

    dado, notif = $('#foo')

    jQuery maneras:

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

    Nativo maneras:

    1. JavaScript nativo’ ele.firstChild4,934,323 ops/seg (todos los enfoques anteriores son 100% más lento en comparación con firstChild)
    2. Nativo DOM ele de jQery: notif[0].firstChild4,913,658 ops/seg.

    Así, en primer lugar el 3 de jQuery enfoques no son recomendables, al menos para el primer hijo (dudo que sería el caso con muchos otros también). Si usted tiene un objeto jQuery y la necesidad de obtener el primer hijo, luego obtener el nativo elemento DOM desde el objeto jQuery, utilizando la matriz de referencia [0] (recomendado) o .get(0) y el uso de la ele.firstChild. Esto le da los mismos resultados idénticos como regular el uso de JavaScript.

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

    • En realidad, firstChild no dan los mismos resultados como jQuery children() o selector de consultas. firstChild se incluyen nodos de texto, que rara vez se desee. jQuery contents() función será los incluyen, pero children() no. Los nuevos navegadores de apoyo firstElementChild que dará el primer elemento secundario, pero IE < 9 no los admite. Por lo tanto, si usted utiliza firstChild tiene manualmente encontrar el primer no-nodo de texto niño.
    • $(":first-child", notif) debe ser $(":first", notif) para el comportamiento esperado. El ex devolverá el primer elemento secundario descendientes.
  3. 13
    element.children().first();

    Encontrar todos los niños y conseguir primero de ellos.

    • El método más simple y más eficiente que .children(':first').
    • ¿Cómo es más eficiente? Parece que se hace todos los niños, entonces toma la primera de ellas, en lugar de recibir sólo el primer hijo.
  4. 9

    ¿Has probado

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

    Creo que se desea establecer su elemento como un contexto para la búsqueda. No podría ser una mejor manera de hacer esto que algunos otros jQuery gurú de salto en el aquí y tirar en usted 🙂

    • esto se producirá si element tiene nietos
  5. 4

    Acabo de escribir un plugin 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);

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

    • Me gusta este plugin, pero hay 2 problemas: 1) El plugin de secuencia de comandos no pueden ser incluidos en la cabeza porque document.body no está inicializado sin embargo, 2) El rendimiento es mucho mejor que las alternativas si el número de nodos secundarios es muy alta. Por sólo un par de niños (menos de 10) el $('>:first-child',context) es un poco más rápido. Sólo el número de hijos afecta al rendimiento, y no la profundidad.
    • buen punto sobre document.body – voy a ver en que.
  6. 1

    por favor, utilice como este
    lo primero dar un nombre de clase de la etiqueta p como «pai»

    entonces utilice el siguiente código

    $(document).ready(function() {
        $(".myp").click(function() {
            $(this).children(":first").toggleClass("classname"); //this will access the span.
        })
    })
    • ¿Por qué el voto?
  7. -3

    Si quieres inmediata primer hijo necesita

        $(element).first();

    Si quieres particular primer elemento en el dom de su elemento, a continuación, utilice por debajo de la

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

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

    • esto está mal – si element es un nodo DOM entonces $(element).first() es equivalente a $(element), no de su primer hijo.
    • De acuerdo, si el elemento es un nodo DOM $(elemento).primero() es equivalente a $(elemento) esto me causó problema con knockoutJS de unión

Dejar respuesta

Please enter your comment!
Please enter your name here