usando .Cada jQuery() en un solo elemento id-selector

Question

Explicando jQuery dialogs en el Blog Nemikor, Scott González utiliza el método each() en un selector id:

$('#page-help').each(function() { 
    var dialog = $('<div></div>') 
    .load($(this).attr('href')) 
    .dialog(...); 
    $(this).click(function() { ... }); 
}); 

Desde un selector de ID puede solo devuelve un solo elemento, ¿para qué sirve el método .each()? (que normalmente es para iterar sobre elementos coincidentes).

¿Es simplemente que no hay una forma más sencilla de ejecutar una función para el elemento 'page-help' que proporciona acceso a $ (esto)?

Answer 1

Te permite jugar con algo sin contaminar el espacio de nombres circundante. Una alternativa podría ser:

(function($this) { 
    var dialog = $('<div></div>') 
    .load($this.attr('href')) 
    .dialog(...); 
    $this.click(function() { ... }); 
})($('#page-help')); 

No sé cuál de los dos es más perturbador. Y supongo que no realmente saben que esa fue la razón para hacerlo de esa manera (es decir, la limpieza del espacio de nombres).

Answer 2

Está usando un .each() por lo this se refiere al elemento y sus variables se encapsula en que la función de devolución de llamada, aunque esto también podría funcionar (pero tendría las variables izquierda alrededor):

var $this = $('#page-help'), 
    dialog = $('<div></div>') 
     .load($this.attr('href')) 
     .dialog(...); 
$this.click(function() { ... }); 

Answer 3

Podría también se hace así, pero eso envoltorio le da el uso de la suerte $ (este) en lugar del siguiente código:

var idPageHelp = $($('#page-help')[0]); 
var dialog = $('<div></div>') 
    .load(idPageHelp.attr('href')) 
    .dialog(...); 
idPageHelp.click(function() { ... }); 

Nota estoy haciendo una suposición que desea concentrarse sólo en el elemento 0 ª y También me estoy enfocando que desea usar idPageHelp como un objeto jQuery, por lo que forzaré su inclusión en un objeto jQuery.

Answer 4

¿Por qué no simplemente asignar una variable?

var ph = $('#page-help') 
var dialog = $('<div></div>') 
ph.load($(this).attr('href')) 
ph.dialog(...); 
$(ph).click(function() { ... }); 
}); 

Answer 5

Yo diría que es una elección de estilo. De hecho, me gusta la forma de selector que se muestra aquí porque vincula un alcance al participante principal en la lógica de una (a mí) forma de auto-documentación.