Question

我有一个名为＆＃39; getHtml（elem）＆＃39;的函数的对象。我希望在$ .each迭代数组时访问它。我明白这个＆＃39;这个＆＃39;引用$ .each迭代中的元素，那么如何访问对象的函数呢？

例如：

 MyObject.prototype.doSomething = function() {
  var results = this.getElements(); //returns this object's array of objects
  var html;
  var elems = [];
  var elem;
  $.each(results, function(index, value) {
    elem = $(this); //refers to the object returned in the $.each function
    html = this.getHtml(elem); //doesn't work, this doesn't refer to this object
    elems.push(html);
  });
},

我得到的错误是：未捕获的TypeError：this.getHtml不是函数

我试着阅读bind（），但我不明白如何使用它。如何在$ .each中调用对象的函数？

Answer 1

将this绑定到每个变量之前的变量（例如var that）：

MyObject.prototype.doSomething = function() {
  var that = this;
  ...
  $.each(results, function(index, value) {
    elem = $(this); 
    html = that.getHtml(elem); // that now = this outside of the loop
    ...
  });
};

Answer 2

由于您需要$.each内的两个上下文，因此您必须将this缓存在each之外并在其中使用。

//Other code
.
.
var _this = this;
$.each(results, function(index, value) {
    elem = $(this); 
    html = _this.getHtml(elem);
    .
    .
    //other code

Answer 3

在输入this之前，尝试将var that分配给each：

var that = this;
...
$.each(results, function(index, value) {
  elem = $(this); // refers to the object passed by the `$.each`
  html = that.getHtml(elem);
  ...
});

Answer 4

你的功能充满了坏习惯，尽管大多数可能不是你自己的错。你在网上看到的大多数jQuery代码的质量都是同样的。

是的，.each是一种迭代项目集合的方式，但您正在尝试同时构建新列表。此操作已存在于称为.map的jQuery中。但是，jQuery喜欢将内容保存在jQuery包装器中，因此如果您希望在调用.map后回复实际数组，则需要在之后调用.get。现在，您将拥有一个包含每个元素html的vanilla JavaScript数组。

MyObject.prototype.doSomething = function() {
  var results = this.getElements(); //returns this object's array of objects
  var elems = $.map(results, function(index, elem) {
    return $(elem).html();
  }).get();
};

如果您能够使用ES6，这项工作就更加轻松了

MyObject.prototype.doSeomthing = function() {
  return $.map(this.getElements(), (idx,elem)=> $(elem).html()).get();
};

＆＃39;这＆＃39;当需要使用＆＃39;这个＆＃39;

4 个答案: