javascript - 了解在插件代码中 $.each 中传递的参数的用法

Question

我是 jQuery 的新手，正在学习新东西。我刚刚阅读了 Chris Coyer 的文章，发现了以下代码:

$.fn.faq = function(options) {
    
    return this.each(function(i, el) {

      var base = el,
              $base = $(el);
          
          console.log(options);
      
      base.init = function() {
        // Do initialization stuff
            $base
               .find("dd")
               .hide()
               .end()
               .find("dt")
               .click(function() {
                 
                 var ans = $(this).next();
                 
                 if (ans.is(":visible")) {
                   base.closeQ(ans); 
                 } else {
                   base.openQ(ans); 
                 }
                 
               })
      };
      
      base.openQ = function(ans) {
        // Open panel
                ans.show();
        
        // Do callback
        options.qOpen.call();
      };
      
      base.closeQ = function(ans) {
        // Open panel
                ans.hide();
        
        // Do callback
        options.qClose.call();
      };
      
      base.init();
           
    });
  
};

$("dl").faq({
  qOpen: myQuestionOpenCallback,
  qClose: myQuestionCloseCallback
});

function myQuestionOpenCallback() {
  alert("answer opened!");
}

function myQuestionCloseCallback() {
  alert("answer closed!");
}

现在我对这部分代码不是很理解:

return this.each(function(i, el) {

代码的第二行，i和el到底是什么？我在任何地方都看不到这些参数被传递到每个函数中。

我问了我的一位资深同事，得到了以下答案:

Many plugins start that way. Since most plugins are chainable, theyhave to return this. And they also have to loop through the elementsfrom the selector,

return this.each(function(i, el) { 

does them both. A loop, then the return.

但我还是不太明白。

可以找到 JS Fiddle here .

Answer 1

在 jQuery 插件中，this 指的是代表您调用插件的 jQuery 对象。例如，对于这个 faq 插件，如果我调用 $('#someDiv').faq({ ... });，this 将与插件函数中的 $('#someDiv') 相同。

因为它是一个表示 DOM 节点选择的 jQuery 对象，所以您可以对其调用 jQuery 方法 .each()，该方法接受一个函数，该函数在调用时会获得两个参数对于选择中的每个 DOM 节点:

1. 索引(0、1、2 等)
2. DOM 节点本身

.each() 还会返回它被调用的对象，因此您最终会从插件返回 $('#someDiv') 对象。太棒了，因为之后我们可以直接在它上面调用其他一些 jQuery 方法(“链接”)。例如$('#someDiv').faq({ ... }).hide(); 立即隐藏它。