在单元素 id-selector 上使用 jQuery .each() 方法答案

【问题标题】：using jQuery .each() method on single-element id-selector在单元素 id-selector 上使用 jQuery .each() 方法
【发布时间】：2010-10-21 17:23:33
【问题描述】：

在 Nemikor 博客中解释 jQuery dialogs，Scott González 在 id 选择器上使用 .each() 方法：

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

既然 id 选择器只能返回一个元素，那么使用 .each() 方法的目的是什么？（通常用于迭代匹配的元素）。

难道没有更简单的方法可以为提供对 $(this) 的访问的 'page-help' 元素执行函数吗？

【问题讨论】：

谢谢大家，在这种情况下，似乎使用用于迭代的方法实际上是访问单个对象的最清晰和最简单的方法。

标签： jquery

【解决方案1】：

它可以让你在不污染周围命名空间的情况下弄乱一些东西。另一种可能是：

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

我不知道两者中哪个更令人不安。而且我想我真的不知道这是这样做的原因（即命名空间整洁）。

【讨论】：

【解决方案2】：

他使用的是.each()，所以this 指的是元素，并且他的变量被封装在回调函数中，尽管这也可以工作（但你会留下变量）：

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

【讨论】：

【解决方案3】：

我会说这是一种风格选择。我实际上喜欢您在此处显示的选择器方式，因为它以（对我而言）自我记录的方式将范围附加到逻辑中的主要参与者。

【讨论】：

【解决方案4】：

也可以这样做，但是这个包装器让你幸运地使用了 $(this) 而不是下面的代码：

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

请注意，我假设您只想关注第 0 个元素，并且我还关注您希望将 idPageHelp 用作 jQuery 对象，因此我强制将其包装在 jQuery 对象中。

【讨论】：

【解决方案5】：

为什么不只分配一个变量？

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

【讨论】：

因为现在这个变量就在那里漂浮着，准备好在以后被一些无辜的关闭无意中拾取。