dojoquery與最接近的方法不工作在Internet Explorer中

Question

我想使用dojo中最接近的方法來找出我想要顯示/隱藏基於在篩選select其中之一選擇的值的元素的第一個父。它在Firefox瀏覽器中工作正常，但在IE中它說Object不支持最接近。這裏的任何幫助真的很感激。下面給出的是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"); 
      } 
     } 
    }); 

即使我試圖平等的測試，以檢查是否兩個節點都是相同的或沒有，但他們是not.If我做簡單的node.closest（ '' ）在上面的代碼在Firefox中工作正常，但是當我使用查詢（節點）.closest（''）也不能在Firefox中工作。不知道我在這裏錯過了什麼。任何幫助真的很感激。謝謝

Answer 1

我不得不使用polyfill爲IE瀏覽器支持最接近的方法。下面的代碼解決了我的問題。希望這可以幫助面臨類似問題的人。

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