IE 中的 jQuery CSS 选择器答案

【问题标题】：jQuery CSS selectors in IEIE 中的 jQuery CSS 选择器
【发布时间】：2010-09-16 06:11:15
【问题描述】：

以下在 Firefox 中有效，但在 IE7 和 8 中中断：

$("#my-first-div, #my-second-div").hide();

所以我必须这样做：

$("#my-first-div").hide();
$("#my-second-div").hide();

这正常吗？

编辑：好的，我实际的代码是这样的：

$("#charges-gsm,#charges-gsm-faq,#charges-gsm-prices").html(html);

我的错误是这样的

( IE8): Message: 'nodeName' is null or not an object
  Line: 19 Char: 150 Code: 0
  URI: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

【问题讨论】：

这对我来说适用于 IE7 和 Firefox

标签： jquery cross-browser

【解决方案1】：

您指定的位置说明：

Message: 'nodeName' is null or not an object
    Line: 19 Char: 150 Code: 0
    URI: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

那个特定的 jquery 是：

nodeName:function(elem,name){
    return elem.nodeName&&elem.nodeName.toUpperCase()==name.toUpperCase();
}

它本身就是为调用jQuery.extend() 而创建的闭包。所以我想问一下，如果你做一个“查看源代码”或它的 IE 等效项，是否有任何其他出现的字符串“nodeName”可能会干扰 jQuery。

您也可以通过创建一个xx.html文件并在IE7/8中打开它来测试以下内容吗？它在 Ubuntu 的 Firefox 3 下运行良好，无论选择器中的逗号后面有没有空格。

<html>
  <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("a").click(function(event){
        $("#charges-gsm,#charges-gsm-faq,#charges-gsm-prices").html("xx")
        event.preventDefault();
      });
    });
  </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
    <hr>
    <div id="charges-gsm">CHARGES-GSM</div>
    <div id="charges-gsm-faq">CHARGES-GSM-FAQ</div>
    <div id="charges-gsm-prices">CHARGES-GSM-PRICES</div>
  </body>
</html>

【讨论】：

感谢这个 Pax。你的例子工作正常。我会做一些调试，让你知道我的问题是什么。至少我现在知道这是我的错；）非常感谢！
这绝不是开发人员的错 :-)，更可能是 jQuery 和其他 AJAXian 事物（如 Google API）之间的恶意交互。这就是为什么我使用该示例将其缩小为 jQuery 或非 jQuery。

【解决方案2】：

嗯，我似乎无法在 IE7 中复制该问题（这两种形式对我来说都很好）。怎么破？是不隐藏，还是只隐藏第一个？

【讨论】：

好的，我的实际代码是这样的： $("#charges-gsm,#charges-gsm-faq,#charges-gsm-prices").html(html);我的错误是这样的（IE8）：消息：'nodeName'为空或不是对象行：19 字符：150 代码：0 URI：ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

【解决方案3】：

你试过逗号后没有空格吗？ The examples given in the specification have no space.

【讨论】：

【解决方案4】：

应该工作，根据documentation。您需要删除逗号后的尾随空格字符。

【讨论】：

【解决方案5】：

碰巧，您的一个元素是否嵌套在另一个元素中？

即：

<div id="foo">
  <div id="bar"> 
    <div id="baz">
  </div>
</div>

如果是这样，您可能遇到了指针问题，IE 可能在您尝试确定它是一个 div 之前释放了 bar。

的行为

$("#foo,#bar,#baz").html("xx");

在这种情况下是：

将 #foo 替换为 xx
将#bar 替换为xx
将 #baz 替换为 xx

但是，如果在第 2 和第 3 阶段，#bar 和 #baz 不再存在，您将获得一些乐趣。（如果 xx 恰好包含 #bar 和 #baz 的副本并不重要，它们可能是不同的对象，并且您要替换的初始对象已经被捕获，只是不再在 DOM 中： / )

您可以通过将过程封装在 try/catch 中来抑制（是的，gah，糟糕的想法）这个错误

try { 
  $("#foo,#bar,#baz").html("xx"); 
}
catch( e ) 
{
   /* DO NOTHING D: */ 
}

但这是你最后的手段，在获得某种 JS 调试器绑定 IE 并将错误跟踪到其核心之后。

【讨论】：