Parent(), una alternativa más rápida?

Question

Estoy trabajando con un tablero de anuncios de divs y cada div tiene un árbol del que están los botones. Cada vez que tengo que saber cuál es el id de ese div, estoy usando parent() mucho.

Principalmente estoy haciendo $(this).parent().parent().parent() para encontrar el ID de div así puedo establecerle variables. La aplicación se basa en los id de cada div.

¿Se considera lento usar parent() hasta 3 veces pero prácticamente en cada función?

¿Hay alguna otra alternativa?

Estoy buscando algo así como el estilo de referencia que muestra lo que es más rápido.

Aquí se muestra un ejemplo del árbol:

<div id="6179827893" class="dashdiv"> 
    <div class="buttons"> 
    <li><a href="#" class="btn1">Button 1</a></li> 
    <li><a href="#" class="btn2">Button 2</a></li> 
    <li><a href="#" class="btn3">Button 3</a></li> 
    <li><a href="#" class="btn4">Button 4</a></li> 
    <li><a href="#" class="btn5">Button 5</a></li> 
    <li><a href="#" class="btn6">Button 6</a></li> 
    </div> 
    <div class="dashcontent"> 

    .... 

    </div> 
</div> 

Answer 1

Tiene algunas opciones para lograr el mismo efecto.

Punto de referencia: http://jsperf.com/parents-method. De acuerdo con este punto de referencia, mi método es aproximadamente 100 veces más rápido que su método.

Method (see below) : Operations per second (higher is better) 
parentNode3x  : 4447k 
$(parentNode3x) : 204K 
$().closest  : 35k 
$().parents  : 9k 
$().parent()3x  : 44k 

// Likely the fastest way, because no overhead of jQuery is involved. 
var id = this.parentNode.parentNode.parentNode.id; 

// Alternative methods to select the 3rd parent: 
$(this.parentNode.parentNode.parentNode) // Native DOM, wrapped in jQuery 

// Slowpokes 
$(this).closest('.dashdiv')    // Hmm. 
$(this).parents('.dashdiv:first')  // Hmm... 

Answer 2

Usted puede ser mejor usar .closest(), así: $(this).closest('.dashdiv')

No es más rápido desde el punto de vista de un motor, ya que eres sigue subiendo por las capas DOM, pero es más claro para un recién llegado y para un código más corto.

COMENTARIO

Si se trata de la velocidad pura que está buscando, que también podría omitir por completo y jQuery utilizar node.parentNode lugar. Pero esto se está metiendo en cuestiones novedosas de ciclos de conteo, y creo que es académico.

Si está escribiendo código de alto rendimiento para una producción importante, como un motor de búsqueda comercial o proveedor de correo web, entonces los ciclos de conteo son importantes porque cualquier optimización pequeña se multiplica miles de veces. Con todo el respeto, dudo que estés escribiendo ese tipo de código.

Si está escribiendo algo que va a ser golpeado por algunas personas a la vez, como máximo, las pequeñas optimizaciones son un ejercicio intelectual que no afectará los resultados de ninguna manera notable. Tendría que mejorar la eficiencia de su código en cientos de milisegundos antes de que cualquier usuario siquiera comenzara a notarlo, y este código no lo hará.

En su lugar, es mucho más importante pensar en el próximo desarrollador que estará mirando su código. Para ese desarrollador, es importante tener un código claro y bien escrito que comunique de inmediato lo que está haciendo. Eye-desenfoque cadenas de métodos como parent().parent().parent() puede oscurecer y confundir a otros desarrolladores, por no hablar de node.parentNode.parentNode.parentNode

- por lo que .closest() fue creado en el primer lugar. Es claro, conciso y no menos eficiente que las cadenas que reemplaza. 999 veces de cada mil, es la forma en que deberías ir.

Answer 3

Primero, no optimice prematuramente. Si no está causando un problema (y prueba a fondo por todos los medios, en un rango de plataformas), entonces no te preocupes por eso.

Hay una posible optimización: utilizar las propiedades DOM nativos:

var id = this.parentNode.parentNode.parentNode.id; 

Tenga en cuenta que el camino jQuery mejor para hacer esto (que será más lenta, pero que puede no ser un problema) es con closest:

$(this).closest('div.dashdiv').prop('id'); 

Answer 4

Si los controladores se encuentran actualmente en los elementos <a>, colocarlos en los .dashdiv elementos en su lugar.

Luego puede hacer this.id si el e.target fue un elemento <a>.

$('.dashdiv').click(function(e) { 
    if(e.target.nodeName.toLowerCase() === 'a') { 
     alert(this.id); 
    } 
});