jQueryPlugin: devolver este vs this.each retorno()

Question

Sí, hay muchos temas acerca de eso, pero yo todavía no entiendo:

preparé dos jsFiddle:

return this

return this.each()

¿Cuál es la diferencia? Hay muchas respuestas, pero mis ejemplos muestran el mismo resultado. ¿Entonces algunas de estas respuestas podrían estar equivocadas?

---

what does "return this.each()" do in jQuery?

"Permite una para llamar un plugin o un evento en un montón de elementos y luego aplicar esa misma función o evento a todos ellos" -> El trabajo de con "return this también"

"que le permite encadenar múltiples funciones" -> aquí mismo

"le permite hacer cosas como: $ (" mySelector ") foo() show();.." -> Todavía posible para esto también, cuando regrese 'esto'

---

también creó otro jsFiddle que muestra - en mi opinión - que no importa si usted está envolviendo en codificar return this.each();:

http://jsfiddle.net/7S3MW/1/

el espectáculo de Chrome Console también el mismo resultado!

¿Cuál es la diferencia?

Answer 1

dos cosas:

1. Sus ejemplos son defectuosas en lo que hacen exactamente lo mismo a cada elemento.
2. El problema real no es return this versus return this.each, el problema es this versus this.each.

Para (1), tenga en cuenta la diferencia entre este plugin:

(function($) { 
    $.fn.mangle = function(options) { 
     this.append(' - ' + this.data('x')); 
     return this; 
    }; 
})(jQuery); 

Demostración: http://jsfiddle.net/ambiguous/eyHeu/

Y este plugin:

(function($) { 
    $.fn.mangle = function(options) { 
     return this.each(function() { 
      $(this).append(' - ' + $(this).data('x')); 
     }); 
    }; 
})(jQuery); 

Demostración: http://jsfiddle.net/ambiguous/5dMMH/

Como ve, necesita usar this.each si necesita tratar los elementos individuales en el conjunto this de forma diferente. Tendría efectos similares si su complemento tuviera que adjuntar datos específicos del elemento a cada elemento: si no usó each, terminaría adjuntando la misma pieza de datos a todos los elementos dentro de this y eso simplemente te deja confundido acerca de por qué la información está sangrando por todo el lugar.

Para (2), no importa si usted return this o return this.each(... desde x.each(...) vuelve x de todos modos.

Answer 2

Ambos son exactamente iguales. .each() vuelve this, por lo return this.each() es exactamente el mismo que this.each();return this;

Editar: método de su más reciente violín makeRed no vuelve this y por lo tanto no se encadenables.

Answer 3

me dejó mostrarle dos piezas "equivalentes" de código que podría aclarar su pregunta:

con jQuery "cada" función:

(function($) { 
    $.fn.mangle = function(options) { 
     return this.each(function() { 
      $(this).append(' - ' + $(this).data('x')); 
     }); 
    }; 
})(jQuery); 

Sin jQuery "cada" función:

(function($) { 
    $.fn.mangle = function(options) { 
     var objs = this; 
     for (var i=0; i<objs.length; i++) { 
      var obj = objs[i]; 
      $(obj).append(' - ' + $(obj).data('x')); 
     }; 
     return this; 
    }; 
})(jQuery); 

Así que, básicamente, la función each se utiliza para aplicar un poco de código a todos los elementos contenidos en this objeto (como this generalmente se refiere a un grupo de elementos devueltos por un selector de jQuery) y devolver la referencia a this (como each función siempre devuelve que la referencia: para permitir el encadenamiento calls-)

Como nota al margen: El segundo enfoque (- for loop-) es más rápido (en particular en los navegadores antiguos) que el ex uno (- each Función-).