Кэширование DOM элементы Javascript

Question

Я пытаюсь кэшировать все элементы DOM на странице intialisation, используя следующий код:

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 элемента, отмеченные ****. Если я не кэширую элементы и intialise var that=this; внутри функции enableTabs, он отлично работает.

Answer 1

Что происходит, что ссылка на this изменений и указывает на что-то другое, как, например:

• в функции click является ссылкой на элемент DOM, который вызвал событие
• в функции each является ссылкой на текущий элемент, который вы повторяете.

Одна из практических рекомендаций заключается в сохранении ссылки на this в другой переменной - обычно cal led self - и это будет доступно в качестве закрытия внутри других методов. Чтобы лучше понять, как меняется контекст, просмотрите bind, call или apply.

В то же время, попробуйте это:

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"); 
      } 
     } 
     }); 
    } 
    }); 
},