带有空格的 jquery ID
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/596314/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery IDs with spaces
提问by Jeff Davis
Does anyone know how to select an item in the DOM by ID with jQuery, when that ID has a space?
有谁知道如何使用 jQuery 通过 ID 在 DOM 中选择一个项目，当该 ID 有空格时？
For example, the ID of my item would be
例如，我的项目的 ID 将是
<div id="content Module">Stuff</div>
How would I select this with jQuery?
我将如何使用 jQuery 选择它？
If I just do
如果我只是这样做
$("#content Module").whatever()
jQuery will try to find an item with both the ID of content and the ID of Module, which is not what I am looking for.
jQuery 将尝试查找具有内容 ID 和模块 ID 的项目，这不是我要找的。
I should add that I am working with an old code base where these two word ids are used extensively, so going through and changing all the IDs would be bad.
我应该补充一点，我正在使用一个旧代码库，其中这两个词 id 被广泛使用，因此遍历并更改所有 ID 会很糟糕。
回答by Elliot Nelson
Use an attribute selector.
使用属性选择器。
$("[id='content Module']").whatever();
Or, better, specify the tag as well:
或者，更好的是，也指定标签：
$("div[id='content Module']").whatever();
Note that unlike $('#id'), this will return multiple elements if you have multiple elements with the same id within your page.
请注意，与 $('#id') 不同的是，如果页面中有多个具有相同 id 的元素，这将返回多个元素。
回答by Glavi?
Don't use spaces, the reason for this is simple, space character is not a valid for ID attribute.
不要使用空格，原因很简单，空格字符对 ID 属性无效。
ID tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
ID 标记必须以字母 ([A-Za-z]) 开头，后面可以跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 ("_")、冒号(":") 和句点 (".")。
But if you don't care about standards try $("[id='content Module']")
但如果你不关心标准试试 $("[id='content Module']")
Similar thread > What are valid values for the id attribute in HTML?
类似主题 > HTML 中 id 属性的有效值是什么？
Edit: How id differs in between HTML 4.01 and HTML5
编辑：HTML 4.01 和 HTML5 之间的 id 有何不同
HTML5 gets rid of the additional restrictions on the id attribute. The only requirements left — apart from being unique in the document — are that the value must contain at least one character (can't be empty), and that it can't contain any space characters.
HTML5 摆脱了对 id 属性的额外限制。剩下的唯一要求——除了在文档中是唯一的——是值必须至少包含一个字符（不能为空），并且不能包含任何空格字符。
回答by Morgon
Just in case anyone is curious, I found that escaping the space will work. This is particularly useful when you don't have control over the target DOM (e.g. from within a userscript):
以防万一有人好奇，我发现逃离空间是可行的。当您无法控制目标 DOM（例如从用户脚本中）时，这特别有用：
$("#this\ has\ spaces");
Note the double-backslash, which is required.
注意双反斜杠，这是必需的。
回答by ceejayoz
The method Chris suggested can likely be adapted to work with jQuery functions.
Chris 建议的方法可能适用于 jQuery 函数。
var element = document.getElementById('content Module');
$(element) ... ;
回答by Chris Klepeis
An idea to try:
一个尝试的想法：
$("#content" + &#032; + "Module").whatever()
$("#content" + %20 + "Module").whatever()
The semicolon may cause a javascript error. I also recommend changing the ID to not have any spaces.
分号可能会导致 javascript 错误。我还建议将 ID 更改为没有任何空格。
Also, try document.getElementByID("content Module")
另外，试试 document.getElementByID("content Module")
回答by xxx
This worked for me.
这对我有用。
document.getElementById(escape('content Module'));
回答by Mathias Bynens
While it's technically invalid to have a space in an ID attribute value in HTML, you can actually select it using jQuery.
虽然在 HTML 中的 ID 属性值中包含空格在技术上是无效的，但您实际上可以使用 jQuery 选择它。
See http://mothereffingcssescapes.com/#content%20module:
见http://mothereffingcssescapes.com/#content%20module：
<script>
// document.getElementById or similar
document.getElementById('content module');
// document.querySelector or similar
$('#content\ module');
</script>
jQuery uses a Selectors API-like syntax, so you could use $('#content\\ module');to select the element with id="content module".
jQuery使用一个选择器API的语法，所以你可以使用$('#content\\ module');选择与元素id="content module"。
To target the element in CSS, you could escape it like this:
要定位 CSS 中的元素，您可以像这样转义它：
<style>
#content\ module {
background: hotpink;
}
</style>
回答by Robert
this can work if you want the element have the exact value for the id
如果您希望元素具有 id 的确切值，这可以工作
$("[id='content Module']").whatever();
but if you want to check if element have only one of them ( just like class ) with or without other ids
但是如果你想检查元素是否只有其中一个（就像 class ）有或没有其他 id
$("[id~='content']").whatever();
this will select the element if it has id="content"or id="content Module"or id="content Module other_ids"
这将选择元素，如果它有id="content"或id="content Module"或id="content Module other_ids"
回答by Martin
I found for my case that escape did not work because it replaces spaces with %20. I used replace instead e.g. to replace the h1 of the page with the text of a list item. If the menu contains:
我发现在我的情况下，转义不起作用，因为它用 %20 替换了空格。我使用了替换，例如用列表项的文本替换页面的 h1。如果菜单包含：
<li id="Contact Us"\>Contact Us</li>
function setTitle(menu) {
$("h1").text( $("li#" + menu.replace(" ", "\ ")).text() );
}
回答by Steven Spungin
I was having issues with element ids containing commas and/or spaces in jQuery, so I did this and it worked like a charm:
我在 jQuery 中遇到包含逗号和/或空格的元素 id 的问题，所以我这样做了，它就像一个魅力：
var ele = $(document.getElementById('last, first'));
var ele = $(document.getElementById('last, first'));
This has spaces and does not work:
这有空格并且不起作用：
var ele = $('#last, first');
var ele = $('#last, first');
This has comma and does not work:
这有逗号并且不起作用：
var ele = $('#last,first');
var ele = $('#last,first');
