最も近いメソッドを持つdojoqueryがInternet Explorerで動作しない

Question

dojoで最も近いメソッドを使用して、フィルタリングselectで選択された値に基づいて表示/非表示にする要素の最初の親を検索しようとしています。それはFirefoxのブラウザでうまく動作しますが、IEではObjectがClosestをサポートしていないと言います。ここの助けは本当に感謝しています。以下にhtmlとjsコードのサンプルを示します。

HTML

<div class="pvrProperty pvrLayoutItem pvrPropertyRequired" id="pvr_widget_Property_3" widgetId="pvr_widget_Property_3"> 
<label class="pvrPropertyLabel" id="pvr_widget_Property_3_label" for="pvr_widget_editors_FilteringSelectEditor_0" data-dojo-attach-point="_labelNode">Product Type</label> 
<div class="pvrPropertyEditor" data-dojo-attach-point="_editorNode"> 
<div class="dijitReset dijitInline idxComposite idxFilteringSelectWrap dijitValidationTextBox idxFilteringSelectWrapRequired dijitValidationTextBoxRequired dijitRequired idxFilteringSelectWrapIncomplete dijitValidationTextBoxIncomplete dijitIncomplete idxFilteringSelectWrapIncompleteRequired dijitValidationTextBoxIncompleteRequired dijitIncompleteRequired pvrEditor pvrFilteringSelectEditor" id="widget_pvr_widget_editors_FilteringSelectEditor_0" widgetId="pvr_widget_editors_FilteringSelectEditor_0"> 
</div> 
</div> 
</div> 
<div class="pvrProperty pvrLayoutItem pvrPropertyRequired" id="pvr_widget_Property_4" widgetId="pvr_widget_Property_4"> 
<label class="pvrPropertyLabel" id="pvr_widget_Property_4_label" for="pvr_widget_editors_FilteringSelectEditor_1" data-dojo-attach-point="_labelNode">Document Type</label> 
<div class="pvrPropertyEditor" data-dojo-attach-point="_editorNode"> 
<div class="dijitReset dijitInline idxComposite idxFilteringSelectWrap dijitValidationTextBox idxFilteringSelectWrapRequired dijitValidationTextBoxRequired dijitRequired idxFilteringSelectWrapIncomplete dijitValidationTextBoxIncomplete dijitIncomplete idxFilteringSelectWrapIncompleteRequired dijitValidationTextBoxIncompleteRequired dijitIncompleteRequired pvrEditor pvrFilteringSelectEditor" id="widget_pvr_widget_editors_FilteringSelectEditor_1" widgetId="pvr_widget_editors_FilteringSelectEditor_1"> 
</div> 
</div> 
</div> 
<div class="pvrProperty pvrLayoutItem pvrPropertyRequired" id="pvr_widget_Property_5" widgetId="pvr_widget_Property_5"> 
<label class="pvrPropertyLabel" id="pvr_widget_Property_5_label" data-dojo-attach-point="_labelNode">Document Type Others</label> 
<div class="pvrPropertyEditor" data-dojo-attach-point="_editorNode"> 
<input type="textbox"></input> 
</div> 
</div> 

Javascriptを： ''（

query(".pvrPropertyLabel").forEach(function(node){ 
     var labelName=node.innerHTML; 
     if(labelName=="Document Type"){ 
      alert("lableName"+labelName); 
      filtertingSelectId=domAttr.get(node,"for"); 
      var temp=dijit.byId(filtertingSelectId).get('value'); 
      alert("value of filtering select is:"+temp); 
     } 
     else if(labelName=="Document Type Others"){ 
      alert("lableName"+labelName); 
      //alert("query(labelNodes[i])"+query(labelNodes[i])); 
      alert("equality test"+node===query(node)); 
      var parentNode=query(node).closest(".pvrProperty");/*node.closest(".pvrProperty") works fine here but not query(node)*/ 
      var spanNode=query(node).closest(".pvrPropertyLabelWrapper"); 
      domStyle.set(spanNode,{"width":"175px"}); 
      var propEditnode=dijit.byId(filtertingSelectId); 
      alert("parentNode:"+parentNode); 
      alert("parentNode id"+domAttr.get(parentNode,"id")); 
      //var dropdownId=domAttr.get(labelNodes[i],"for"); 
      if(propEditnode.get('value')=="Other"){ 
       alert("other"); 
       domClass.remove(parentNode,"pvrLayoutItemHidden"); 
       domClass.remove(parentNode,"pvrPropertyHidden"); 
       domClass.add(parentNode,"pvrLayoutItem"); 
      }else{ 
       alert("not other"); 
       domClass.add(parentNode,"pvrLayoutItemHidden"); 
       domClass.add(parentNode,"pvrPropertyHidden"); 
       domClass.remove(parentNode,"pvrLayoutItem"); 
      } 
     } 
    }); 

はさえ、私は両方のノードが同じかそうでないかどうかを確認するために平等のテストを試してみましたが、彼らは、私はシンプルなnode.closestを行うnot.Ifあります）上記のコードではfirefoxでうまく動作しますが、私がquery（node）.closest（ ''）を使ってもfirefoxでは動作しません。私がここで何が紛れているか分からない。どんな助けも本当に高く評価されています。ありがとう

Answer 1

私は最も近いメソッドをサポートするためにIEブラウザ用にpolyfillを使用しなければなりませんでした。これは誰かが同様の問題に直面するのを助けることを望みます

 if (window.Element && !Element.prototype.closest) { 
       Element.prototype.closest = 
       function(s) { 
        var matches = (this.document || this.ownerDocument).querySelectorAll(s), 
         i, 
         el = this; 
        do { 
         i = matches.length; 
         while (--i >= 0 && matches.item(i) !== el) {}; 
        } while ((i < 0) && (el = el.parentElement)); 
        return el; 
       }; 
      } 
     query(".pvrPropertyLabel").forEach(function(node){ 
      var labelName=node.innerHTML; 
      if(labelName=="Document Type"){ 
       //alert("lableName"+labelName); 
       filtertingSelectId=domAttr.get(node,"for"); 
       var temp=dijit.byId(filtertingSelectId).get('value'); 
       //alert("value of filtering select is:"+temp); 
      } 
      else if(labelName=="Document Type Others"){ 
       //alert("lableName"+labelName); 
       //alert("query(labelNodes[i])"+query(labelNodes[i])); 
       var lableId=domAttr.get(node,"id"); 
       //alert("labelId:"+lableId); 
       var parentNode=node.closest(".pvrProperty"); 
       var spanNode=node.closest(".pvrPropertyLabelWrapper"); 
       domStyle.set(spanNode,{"width":"175px"}); 
       var propEditnode=dijit.byId(filtertingSelectId); 
       //alert("parentNode:"+parentNode); 
       //var dropdownId=domAttr.get(labelNodes[i],"for"); 
       if(propEditnode.get('value')=="Other"){ 
        domClass.remove(parentNode,"pvrLayoutItemHidden"); 
        domClass.remove(parentNode,"pvrPropertyHidden"); 
        domClass.add(parentNode,"pvrLayoutItem"); 
       }else{ 
        domClass.add(parentNode,"pvrLayoutItemHidden"); 
        domClass.add(parentNode,"pvrPropertyHidden"); 
        domClass.remove(parentNode,"pvrLayoutItem"); 
       } 
      } 
     });