Question

$.fn.slideUpTransition = function() {
            return this.each(function() {
                var $el = $(this);
                $el.css("max-height", "0");
                $el.addClass("height-transition-hidden");
            });
        };

在jQuery中，this.each将迭代所有匹配的元素，然后应用该函数。在这里，此作为全局对象保存div的类选择器。

jQuery.fn.init [div.custom-dropdown-body.height-transition， prevObject：jQuery.fn.init（1）]

我们如何使用纯JavaScript实现相同的目标？ 我尝试执行以下操作，但无法达到预期效果：

var obj = this;
for(var i=0; i< obj.length; i++){
  // codes
};
return this

Answer 1

这是一个基于NodeList的示例，说明$.each的工作原理：

NodeList.prototype.each = function(fn) {
  for (var i = 0; i < this.length; i++) {
    fn.apply(this[i], [i, this[i]]);
  }
  return this;
};

document.querySelectorAll("p").each(console.log).each(function(i) {
  this.textContent = i;
});

<p></p>
<p></p>
<p></p>

（使用jQuery使用的index, element的相同顺序，而不是element, index的JS约定！）

编辑：为回调添加了正确的this绑定

普通（香草）javascript中的jQuery.each（）函数

1 个答案: