jQueryPlugin: restituire questo vs this.each ritorno()

Question

Sì, ci sono molti argomenti a riguardo, ma non ho ancora capito:

ho preparato due jsfiddle:

return this

return this.each()

Qual è la differenza? Ci sono molte risposte, ma i miei esempi mostrano lo stesso risultato. Quindi alcune di queste risposte potrebbero essere sbagliate !?

---

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

"permette per uno a chiamare un plugin o un evento su un mucchio di elementi e quindi applicare la stessa funzione o evento a tutti loro" -> il lavoro di con "return this pure!"

"ti permette di catena funzioni multiple" -> stesso qui

"permette di fare le cose come: $ (" mySelector ") foo() show();.". -> Ho ancora possibile per questo pure, quando torno 'questo'

---

Ho anche creato un altro jsfiddle che mostra - a mio parere - che non importa se si sta avvolgendo si codice in return this.each();:

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

il Chrome Console show di anche la stessa uscita!

Quindi qual è la differenza?

Answer 1

due cose:

1. I suoi esempi sono viziate in quello che fanno esattamente la stessa cosa ad ogni elemento.
2. Il vero problema non è return this contro return this.each, il problema è this contro this.each.

Per (1), considerare la differenza tra questo plugin:

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

Demo: http://jsfiddle.net/ambiguous/eyHeu/

E questo plugin:

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

Demo: http://jsfiddle.net/ambiguous/5dMMH/

012.

Quindi, è necessario utilizzare this.each se è necessario trattare i singoli elementi nell'insieme this in modo diverso. Avresti effetti simili se il tuo plugin dovesse allegare dati specifici degli elementi a ciascun elemento: se non avessi usato each, avresti finito per attaccare lo stesso identico pezzo di dati a tutti gli elementi all'interno di this e questo sarebbe solo lasciati confusi sul motivo per cui le informazioni sanguinano dappertutto.

Per (2), non importa se si return this o return this.each(... dal x.each(...) rendimenti x comunque.

Answer 2

Sono entrambi esattamente uguali. .each() rendimenti this, così return this.each() è esattamente lo stesso di this.each();return this;

Edit: il metodo vostra più recente del violino makeRed non restituisce this e pertanto non è chainable.

Answer 3

Mi permetta di mostrare due pezzi "equivalenti" di codice che potrebbe chiarire la tua domanda:

Con jQuery "ogni" funzione:

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

Senza jQuery "ogni" funzione:

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

Quindi, in sostanza, la funzione each viene utilizzato per applicare un codice a tutti gli elementi contenuti nel this oggetto (come this solito si riferisce ad un gruppo di elementi restituiti da un selettore jQuery) e restituire il riferimento this (come each funzione restituisce sempre che permettono riferimento -per concatenamento calls-)

Come nota a margine: Il secondo approccio (-for loop-) è più veloce (in particolare su vecchi browser) che l'ex uno (- each FUNCTION-).