en utilisant la méthode .each() jQuery sur un seul élément id-sélecteur

Question

Explication jQuery dialogs dans le blog Nemikor, Scott González utilise la méthode .each() sur un sélecteur d'ID:

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

Depuis un sélecteur d'ID peut retourner un seul élément, quel est le but de l'utilisation de la méthode .each()? (qui est normalement pour itérer sur des éléments correspondants).

Est-ce simplement qu'il n'y a pas de façon plus simple d'exécuter une fonction pour l'élément 'page-help' qui donne accès à $ (this)?

Answer 1

Il vous permet de jouer avec quelque chose sans polluer l'espace de noms environnant. Une alternative pourrait être:

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

Je ne sais pas lequel des deux est le plus gênant. Et je suppose que je ne sais pas vraiment ce que c'était la raison de le faire de cette façon (c'est-à-dire, ordre de l'espace de noms).

Answer 2

Il utilise un .each() si this fait référence à l'élément et ses variables sont encapsulés dans cette fonction de rappel, bien que cela fonctionnerait aussi (mais vous auriez les variables gauche autour):

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

Answer 3

Il pourrait également être fait comme ça, mais cet emballage vous donne la chance à l'utilisation de $ (ce) au lieu du code ci-dessous:

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

Remarque que je fais une hypothèse que vous voulez concentrer uniquement sur l'élément 0e et Je me concentre aussi que vous voulez utiliser idPageHelp en tant qu'objet jQuery, donc je le force à être enveloppé dans un objet jQuery.

Answer 4

Pourquoi ne pas simplement attribuer une variable?

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

Answer 5

Je dirais que c'est un choix de style. En fait, j'aime bien le mode de sélection que vous montrez ici parce qu'il attache une portée au participant principal dans la logique d'une manière auto documentée (pour moi).