jQuery 选择器转义冒号“：”在 IE 中有效，但在其他地方无效

Posted 2023-05-09

【中文标题】jQuery 选择器转义冒号“：”在 IE 中有效，但在其他地方无效

【英文标题】：jQuery Selector escaping colon ":" works in IE but does not work elsewhere

【发布时间】：2014-02-06 02:55:12

【问题描述】：

我有一个 XSL 对象。我想提取一组选定的节点。另一个人或团队编写了 XSL 文档和选择这些节点的代码行，但它仅适用于 IE，我正在尝试使其跨浏览器兼容。

XSL 文件

<!-- snippet of XSL file -->
<xsl:variable name="title">aaa</xsl:variable>

<xsl:variable name="col1">CSV00001</xsl:variable>
<xsl:variable name="col2">CSV00002</xsl:variable>
<xsl:variable name="col3">CSV00003</xsl:variable>
<xsl:variable name="col4">CSV00004</xsl:variable>
<xsl:variable name="col5">CSV00005</xsl:variable>
<xsl:variable name="col6">CSV00006</xsl:variable>
<xsl:variable name="col7">CSV00007</xsl:variable>
<xsl:variable name="col8">CSV00008</xsl:variable>
<xsl:variable name="col9">CSV00009</xsl:variable>

JS 文件

// Extract title and column nodes
var varNodes = $(csvXsl).find("xsl\\:variable");

我尝试参考这篇文章以获取想法，Handling a colon in an element ID in a CSS selector，但那是针对 CSS 的。但我确实尝试用\\3A、\\3a、3a、3A 替换\:，但这些都不起作用。

有什么建议吗？

根据要求，这里提供了有关如何创建 XSL 对象的更多信息。

function loadXml(xmlFilePath) 
    var retObj = null ;
    var timeUniq = (new Date()).getTime();

    // check protocol
    var protocol = document.location.protocol;
    if(protocol.toLowerCase().indexOf("http")>=0)
        $.ajax(
            url: xmlFilePath + "?t=" + timeUniq,
            type: 'get',
            dataType: 'xml',
            async: false,
            timeout: 1000
        )
           .done(
               function(xml, status)
                   if( status != 'success' )
                       return;
                   
                   retObj = xml;
               )
           .fail(
               function(xhr, textStatus)
                   return;
               );
    

    return retObj;


csvXsl = loadXml("./xsl/OrderListCSV.xsl");

谢谢。

更新

根据要求，我添加了一个小提琴。

http://jsfiddle.net/Q3jNN/

更新2

工作 JSFiddle 例程，所有功劳归功于评论员 Niet。

http://jsfiddle.net/dNDN6/2/

如果链接被破坏，这里是相关部分：

// Workaround for JQuery bug, primarily using Vanilla JS.

function serializeXmlNode(xmlNode) 
    if (typeof window.XMLSerializer != "undefined") 
        return (new window.XMLSerializer()).serializeToString(xmlNode);
     else if (typeof xmlNode.xml != "undefined") 
        return xmlNode.xml;
    
    return "";


var tmpStr = serializeXmlNode(csvXsl); // Converts XML/XSL object to String
var tmp = document.createElement('div');

tmp.innerhtml = csvXsl; // Does not work
tmp.innerHTML = tmpStr; // This one works, had to serialize object first

var varNodes = tmp.getElementsByTagName('xsl\:variable'); // Works
var varNodes2 = tmp.getElementsByTagName('xsl:variable'); // Also works

【问题讨论】：

csvXsl 变量中有什么内容？

在其他浏览器中运行代码时实际发生了什么？您是否在浏览器控制台中报告了特定错误，或者...？

csvXsl 是 XSL 对象，由上面的 XSL 文件创建。

很遗憾，我在浏览器控制台中没有收到错误报告，没有。 jQuery 对象的长度只是 0，但它并不是设置为 null 或 undefined。

【参考方案1】：

我会采取一些步骤来调试这个问题：

检查 csvXls 变量的内容，您可以尝试例如查找： console.log(csvXsl) 然后 $(csvXsl).find("xsl\\:variable"); 或$("xsl\\:variable",csvXsl);

如果该变量包含正确的节点，例如<xsl:variable name="col9">CSV00009</xsl:variable>，那么它可能是 jQuery 中的一个错误，我觉得在这样的基本选择器中排除了它。

发布您如何获得更多上下文的 csvXsl，以便我们可以更好地帮助您。

【讨论】：

您不应该解释一下为什么会有所不同吗？

我更新了我的回复，提供了有关如何调试此问题的更多详细信息。

谢谢。是的，我可以在控制台中查看 csvXsl 对象的内容，并看到该对象是正确的，并且与在 IE 中的显示完全相同。我尝试了两种形式的 find 方法，它返回 []。但是，如果我使用$(csvXsl).find("variable")，它会找到节点。所以，这可能是 jQuery 中的一个错误。同样，我还没有看到在 IE 中出现这个问题。

更正：它似乎在 Firefox 中工作，至少大部分时间是这样。但是，它绝对不能在 Chrome 中运行。

你能做一个小提琴吗？

【参考方案2】：

这确实是 jQuery 的一个 bug。

尝试改用Vanilla JS：

var tmp = document.createElement('div');
tmp.innerHTML = csvXsl;
var varNodes = tmp.getElementsByTagName('xsl:variable');

【讨论】：

非常感谢。我从那个 Vanilla JS 链接中哈哈大笑。请在此处查看 JSFiddle 例程 --> jsfiddle.net/dNDN6/2。不过，我必须序列化 XSL 对象，然后将其设置为 tmp.innerHTML，以使其工作。感谢您的帮助！

【参考方案3】：

由于没有足够的代表，必须通过“回答”发表评论

行：

 var inputTag = $("#test\\:1").val()); 

在小提琴中应该显示什么有效：http://jsfiddle.net/dNDN6/2/

实际上在 Chrome / webkit 中不起作用

正确的方法是在没有命名空间（冒号之后）的标签上首先使用纯 JS 和 getElementsByTagName，如果没有元素，则完整标签如下：

var x = xmlDoc.getElementsByTagName("variable");
if (!x[0]) x = xmlDoc.getElementsByTagName('xsl:variable');

x 将包含您的数组 [跨浏览器]