jQuery 高级选择器在 Internet Explorer 8 中失败答案

【问题标题】：jQuery advanced selector fails in Internet Explorer 8jQuery 高级选择器在 Internet Explorer 8 中失败
【发布时间】：2011-10-23 09:20:13
【问题描述】：

我正在使用一个复杂的选择器，它在 Chrome 和 Firefox 等中运行良好。但在 Internet Explorer 8 中它失败了。我还没有在旧版本中测试过。

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
    <html>
         <head>
              <title>Title</title>
              <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'>            </script>
              <script type='text/javascript'>
                     $(function(){
                          $('span[style*="left:20px"][style*="width:100%"]').css({color:'red'});
                          $('#first').css({color:'blue'});
                     });
              </script>
         </head>
         <body>
              <span id='first' style='left:20px; width:100%;'>Should be red</span>
              <span id='second' style='left:30px; width:100%;'>Should be blue</span>
         </body>
    </html>

只是把它放在上下文中，不，我不能向跨度添加类或 ID，因为跨度不会总是在同一个位置，我需要根据它们的位置调整 CSS（对于其他，无趣的原因，我不能编辑代码来移动它们），我不能使用外部样式。

在 IE 中使这项工作我缺少什么，如果没有，您能否提出解决方法？

这是一个 JSFiddle http://jsfiddle.net/RMzuh/1/

【问题讨论】：

您应该匹配您的小提琴和帖子中的代码。您没有发布相同的 HTML 结构。
在您的示例中，您将第一个文本设置为红色，然后是蓝色，因此“应该是红色”的文本是蓝色的，而“应该是蓝色的”文本是默认的黑色。

标签： jquery internet-explorer jquery-selectors

【解决方案1】：

这里有一个解决方法：

$('span').each(function() {
   if(this.style.left == "20px" && this.style.width == "100%") {
       $(this).css({color:'red'});
   }
});

小提琴：http://jsfiddle.net/mrchief/RMzuh/16/

另外，请注意 left:20px 将无效，除非您设置 positon:absolute; 或类似的。

【讨论】：

【解决方案2】：

你可以使用.filter()代替复杂的选择器

$('span[style]').filter(function() {
    return this.style.left === "20px" && this.style.width === "100%";
}).css({
    color: 'red'
});

Updated jsfiddle

在 IE9 和 IE9 兼容性视图中测试（均因原始小提琴而失败）

【讨论】：

【解决方案3】：

我个人对与您的工作方式相匹配的风格完全有效感到惊讶。某个地方的一个空间的存在可能会把它扔掉。当我对这些对象的样式属性执行 getAttribute 时，冒号后有一个空格，实际上，如果您在冒号后的匹配字符串中放置一个空格，您的技术就开始在 IE9 上运行。这意味着，您的技术是特定于浏览器的。是时候找到更好的方法来解决这个问题了。

我建议您采用像 Mrchief 建议的更明确的解决方法。

您可以在this fiddle 中看到，它在 IE9 中有效，而以前的无效，但新的在 Chrome 中无效 - 因此确认您需要一种不同的方式。

【讨论】：

【解决方案4】：

您不能依赖样式属性的内容与您用来设置它的字符串完全相同。 Internet Explorer 将样式标准化为 left: 20px; width: 100%;，因此额外的空格使 jQuery 选择器无法正常工作。

如果您在 style 属性和选择器中的冒号后使用空格，它可以在 Internet Explorer、Firefox、Chrome 和 Opera（演示：http://jsfiddle.net/psfWN/1/）中使用，但我不能说什么任何其他浏览器，您很可能会在某些浏览器中发现不同的行为。您根本不能依靠特定方式的样式格式，所以如果它是一个重要的功能，您应该找到不同的方法。

【讨论】：