Question

在Nemikor博客中解释jQuery dialogs，ScottGonzález在id选择器上使用.each（）方法：

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

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

是否只有没有更简单的方法来执行'page-help'元素的功能，该元素提供对$（this）的访问？

Answer 1

它可以让你弄乱一些东西，而不会污染周围的命名空间。另一种选择可能是：

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

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

Answer 2

他正在使用.each()所以this引用了元素，并且他的变量被封装在该回调函数中，虽然这也可以工作（但是你有剩下的变量）：

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

Answer 3

我会说这是一种风格选择。我实际上喜欢你在这里展示的选择器方式，因为它将一个范围附加到逻辑中的主要参与者（对我来说）自我记录方式。

Answer 4

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

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

注意我假设您只想关注第0个元素，并且我也在关注您希望将idPageHelp用作jQuery对象，所以我强迫它包装在jQuery对象中。

Answer 5

为什么不直接分配变量？

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

在单元素id-selector上使用jQuery .each（）方法

5 个答案: