为什么 jQuery 的 parent/closest(selector) 函数在 IE8 中的行为不同？答案

【问题标题】：Why does jQuery's parents/closest(selector) functions behave differently in IE8?为什么 jQuery 的 parent/closest(selector) 函数在 IE8 中的行为不同？
【发布时间】：2011-08-22 13:10:08
【问题描述】：

我有一个在 Chrome 11 和 Firefox 4 中运行良好的 jQuery 脚本，但在 IE8 中它似乎被破坏了。它似乎与使用带有选择器的 jQuery parents() 函数有关。在 IE8 中运行时不返回任何元素。

我创建了我的问题的简化版本，它显示了相同的症状 over at jsFiddle，以防止此处出现大量代码。

谁能告诉我这里发生了什么？

更新：使用closest() 似乎会导致类似的行为，但在这种情况下似乎更合适。

【问题讨论】：

IE 8 是否支持data- 属性？如果您使用非data- 属性，它是否有效？你确定parents() 是你想要的，而不是nearest()？
@Craig：我从一个尝试支持 IE 的工作原型开始，所以没有尝试过非数据属性。我认为您的意思是最接近的（），这似乎更符合我的要求。我会调查的。

标签： jquery internet-explorer-8 jquery-selectors parents

【解决方案1】：

顶级元素必须是部分吗？您似乎遇到了 IE8 中缺乏对 HTML5 的支持而限制您的领域之一。如果将部分更改为 div，则代码将按原样运行。

Section support in browsers.

【讨论】：

就是这样！将部分更改为 div 确实可以修复它。我现在只能忍受较少的语义标记。不幸的是，我的公司可能不会很快升级到 IE9。谢谢杰夫！
我不知道 jQuery 的选择器机制受到浏览器支持的限制。我以后应该考虑一下。

【解决方案2】：

查看你的 jsFiddle 中的选择器，如果我刚刚去掉了选择器的第二部分，我就能让它在 IE8 中正常工作。

$(document).ready( function(){
     $('a[data-detailed]').live('click', function(event){
        var a = $(this);
        var key= a.attr('data-detailed');

        $(".detailedOverview[data-detailed="+key+"]").slideToggle('fast');
        $(".masterOverview").slideToggle('fast');
        event.preventDefault();   
    });

    $('a[href=#back]').live('click', function(event){
        var a = $(this);
        var detailedOverview= a.parents("[data-detailed]");

        $(".masterOverview").slideToggle('fast');         
        detailedOverview.slideToggle('fast');

        event.preventDefault();   
    });
});

在每个选择器中，选择器后面都有一个“, fileparent”。没有必要像这样指定父母并摆脱它。实际上，您可以完全摆脱 fileparent。

【讨论】：

fileparent 是要在其中搜索的上下文（如果未提供，jquery 将从文档根目录开始搜索）。在这个问题的情况下，上下文应该是fileParent[0]。仅当元素在 ".detailedOverview[data-detailed="+key+"]" 选择器的整个文档中是唯一的时，没有上下文才有效。
我以前只有一个部分，在这种情况下，您不需要 fileParent 是绝对正确的。然而，页面是动态构建的，一旦有多个部分，就需要上下文来防止其他部分中的所有类似概述也被切换。我想我只添加了一个部分就过度简化了我的示例，对此感到抱歉。我已经更新了 jsFiddle。