using jQuery .each() method on single-element id-selector

Question

Explaining jQuery dialogs in the Nemikor Blog, Scott González uses the .each() method on an id selector:

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

Since an id selector can only return a single element, what is the purpose of using the .each() method? (which is normally for iterating over matched elements).

Is it just that there is no simpler way to execute a function for the 'page-help' element which provides access to $(this)?

Answer 1

It lets you mess with something without polluting the surrounding namespace. An alternative might be:

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

I don't know which of the two is more disturbing. And I suppose I don't really know that that was the reason for doing it that way (that is, namespace tidiness).

Answer 2

He's using a .each() so this refers to the element and his variables are encapsulated in that callback function, though this would also work (but you'd have the variables left around):

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