缓存DOM元素javascript

我正在尝试使用以下代码缓存页面初始化上的所有DOM元素：

init:function(){
      this.cacheDom();      
    }

cacheDom:function(){
       var that = this;
       this.$jsTabs              = this.container.find('.js-tabs');
       this.$li                  = $jsTabs.find('.tabs').find('li');
       this.$filterBodyTr   =  that.container.find('#filter_body').find("tr");
       this.$customRuleInfo = that.container.find('#custom_rule_info');

    },

enableTabs :function() {

     this.$li.click(function(){
      var index  = this.$li.index(this);
      this.$jsTabs.tabs().select(index);
      if(index==2){
        ****var tr = this.$filterBodyTr;****
        tr.each(function(){
            $t = $(this);
            if($t.is(":visible")){
                if ($t.text().toUpperCase().indexOf("MY NAME") > -1){
                    ****this.$customRuleInfo.addClass("hide-data");****
                }
            }
        });
      }

  });
},

此处，

this.$filterBodyTr

和

this.$customRuleInfo

在enableTabs函数中标记为****的行中未定义。我尝试使用

this

而不是

that

来查找元素，但它始终显示未定义

下面是引用元素的html代码

<table class="table-compressed" id = "js_filter_sort">
        <colgroup>
             <col class="column-lg-3">
             <col class="column-lg-1">
             <col class="column-lg-4">
             <col class="column-lg-2">
             <col class="column-lg-2">
        </colgroup>
        <tbody id = "filter_body"> </tbody>
 </table>



<div class= "row gutter-0 clear text-left padding-left-20 padding-right-20 padding-bottom-20 padding-top-20 hide-data" id = "custom_rule_info">                                               
                                        </div>

---

如何缓存标记为****的2个元素。如果我不缓存元素并初始化

var，那么它=这个内部enableTabs功能它工作得非常好。
发生的情况是，对该

的引用更改并指向其他内容，例如：

• 在

  中，click

  函数是对触发事件的DOM元素的引用
• 在

  中，每个

  函数都是您正在迭代的当前元素的引用

一种做法是在另一个变量（通常称为

self

）中保存对

this

的引用，这将在其他方法中作为闭包提供。要更好地理解上下文是如何变化的，请查看或

同时，尝试以下方法：

init:function(){
  this.cacheDom();      
}

cacheDom:function(){
   this.$jsTabs         = this.container.find('.js-tabs');
   this.$li             = $jsTabs.find('.tabs').find('li');
   this.$filterBodyTr   =  that.container.find('#filter_body').find("tr");
   this.$customRuleInfo = that.container.find('#custom_rule_info');
},

enableTabs :function() {
  var self = this
  this.$li.click(function(){
    var index  = self.$li.index(this);
    self.$jsTabs.tabs().select(index);
    if(index==2){
      var tr = self.$filterBodyTr;
      tr.each(function(){
        $t = $(this);
        if($t.is(":visible")){
          if ($t.text().toUpperCase().indexOf("MY NAME") > -1){
           self.$customRuleInfo.addClass("hide-data");
          }
        }
      });
    }
  });
},

---

单击

回调中的

此

与外部不同。您需要使用

that

缓存它，并更改回调中的引用。使用此代码

this.$li

可以看到enabletab函数未定义，但在cacheDom函数中可用。我替换了

$jsTabs.find（'.tabs'）.find（'li'）this.jsTabs.find（'.tabs'）.find（'li'）

我一直得到

无法读取未定义的属性“index”

我告诉过你

这个

改变了范围。确保根据应用程序的逻辑引用当前范围。如果在

click（）

中，这是被单击的元素，在

中，每个
都是迭代的当前元素。确保你正确使用它。PS：我已经编辑了答案，现在试试吧！