javascript/jQuery 找不到 ID 混乱的元素答案

【问题标题】：javascript/jQuery can't find element with messed up idjavascript/jQuery 找不到 ID 混乱的元素
【发布时间】：2011-09-01 14:17:59
【问题描述】：

我正在尝试使用以下 ID 访问 MS CRM 2011 中的元素： account|NoRelationship|Form|B_GenerateInvoice-Large

我可以在 IE 开发者工具中看到这个元素：

不幸的是，当我试图找到这个元素时，我总是得到 null。

我尝试了以下方法：

alert(document.getElementById('account|NoRelationship|Form|B_GenerateInvoice-Large'));
alert($("[id='account|NoRelationship|Form|B_GenerateInvoice-Large]").html());
alert($(jq("account|NoRelationship|Form|B_GenerateInvoice-Large")).html());  // jq() adds the '#' and escapes special characters
alert($("#account|NoRelationship|Form|B_GenerateInvoice-Large").html());
alert(document.getElementById("#account\\|NoRelationship\\|Form\\|B_GenerateInvoice-Large"));
alert($("#account\\|NoRelationship\\|Form\\|B_GenerateInvoice-Large").html());

这些都找不到元素。

我在这里遗漏了什么明显的东西吗？

解决方案：

javascript 在 iframe 内，而元素在 iframe 之外..

我没能解决它。

【问题讨论】：

标签： javascript jquery jquery-selectors dynamics-crm-2011

【解决方案1】：

jQuery Manual on Selectors 声明：

如果您想使用任何元字符（例如 !"#$%&'()*+,./:;?@[]^`{|}~ ) 作为名字的字面部分，你必须用两个转义字符反斜杠：\\.例如，如果您有一个 id="foo.bar" 的元素，你可以使用选择器 $("#foo\\.bar")。 W3C CSS 规范包含 complete set of rules regarding valid CSS selectors.

所以试试这个：

$('#account\\|NoRelationship\\|Form\\|B_GenerateInvoice-Large')...

jsFiddle Demo

编辑：我已经在 Chrome、Firefox 4、IE9、IE8 和 IE7 中成功测试了我的 Fiddle，它运行良好。

【讨论】：

好答案@bazmegakapa 我不知道。我环顾四周，似乎有人在谈论拥有选择器转义功能，这似乎是个好主意。 forum.jquery.com/topic/add-a-jquery-selector-escape-function
第三个警报使用 jquery.com 上的函数 jq() 转义这些字符。我用你的字符串试过了，我仍然得到一个空值。
你可以在这里找到转义函数：docs.jquery.com/…
感谢您的评论，我会调查的。我刚刚尝试在 DOM 树中找到一个父元素，但它也没有找到任何东西。我可以在我的一段代码中执行 jQuery ajax 调用等，所以我确信 jQuery 工作正常.. bleh。当我找到原因时，我一定会在这里发布。非常感谢您的帮助。
@Thomas 您是否在$(document).ready() 处理程序中运行查询？确保 DOM 在您想在其中查找内容时已启动。

【解决方案2】：

这可能是浏览器中的一个错误，因为 HTML5 规范允许 id 属性中除了空格之外的任何字符

身份证号

任何字符串，有以下限制：

必须至少有一个字符

不得包含任何空格字符

但是，建议不要在 id 属性中放置任何奇怪的字符，只有数字、字母和下划线：)

【讨论】：

由于 HTML 5 是一个草案，可以说它不是一个错误，它只是尚未实现的东西。

【解决方案3】：

来自 jQuery 文档：

如果您希望使用任何元字符（例如 !"#$%&'()*+,./:;?@[]^`{|}~ ）作为文字名称的一部分，您必须使用两个反斜杠转义字符：\。例如，如果您有一个 id="foo.bar" 的元素，您可以使用选择器 $("#foo\.bar")。

所以这应该有效：

alert($("#account\\|NoRelationship\\|Form\\|B_GenerateInvoice-Large").html());

确实如此：http://jsfiddle.net/Cdz9w/

【讨论】：

这不是@bazmegakapa 说的吗？
@T.J.确实如此。他的速度更快。
感谢 jsfiddle 链接。这让我认为问题与 CRM 相关。

【解决方案4】：

页面声明它使用的是什么版本的 HTML？因为那是valid HTML5 id，但它是invalid HTML4.01 and earlier id。（它也是一个invalid CSS id，如果你使用 jQuery 之类的东西来查找它，它是模糊相关的，因为 jQuery 使用 CSS 选择器。）

@bazmegakapa's answer 中的小提琴在 Chrome 上对我有用，但也许您的页面声明了不同版本的 HTML，或者可能是不太先进的浏览器不喜欢它，等等。

【讨论】：