带空格的 jquery ID

有人知道如何使用 jQuery 通过 ID 在 DOM 中选择一个项目吗？

例如，我的项的 ID 将为

<div id="content Module">Stuff</div>

如何使用 jQuery 选择它？

如果我这么做的话

$("#content Module").whatever()

JQuery 将尝试查找同时具有内容 ID 和模块 ID 的项，这不是我要查找的。

我应该补充一点，我使用的是一个旧的代码库，其中广泛使用了这两个单词 id，因此遍历和更改所有 ID 将是不好的。

102852 次浏览
小开

不要使用空格，原因很简单，空格字符对 ID 属性无效。

ID 标记必须以字母开头 ([ A-Za-z ]) ，并且可以后跟任何 字母数、数字([0-9])、, 连字符(“-”) ，下划线(“ _”) , 冒号(“ :”)和句号(“ .”)。

但是如果你不关心标准，试试 $("[id='content Module']")

相似的线程 > HTML 中 id 属性的有效值是什么？

编辑: HTML 4.01和 HTML5的 id 有什么不同

HTML5摆脱了对 id 属性的附加限制 除了在文件中是唯一的以外，剩下的唯一要求是 值必须包含至少一个字符(不能为空) , 它不能包含任何空格字符。

链接: http://mathiasbynens.be/notes/html5-id-class

小开

一个可以尝试的想法:

$("#content" + &amp;#032; + "Module").whatever()


$("#content" + %20 + "Module").whatever()

分号可能会导致 javascript 错误。我还建议将 ID 更改为没有任何空格。

还有，试试 document.getElementByID("content Module")

小开

Chris 建议的方法可能适用于 jQuery 函数。

var element = document.getElementById('content Module');
$(element) ... ;
小开
最佳答案

使用属性选择器。

$("[id='content Module']").whatever();

或者，更好的做法是，也指定标记:

$("div[id='content Module']").whatever();

注意，与 $(’# id’)不同，如果页面中有多个元素具有相同的 id，那么这将返回多个元素。

小开

这招对我很管用。

document.getElementById(escape('content Module'));
小开

以防有人好奇，我发现逃离这个空间是有用的。 当您无法控制目标 DOM 时(例如，从用户脚本中) ，这种方法尤其有用:

$("#this\\ has\\ spaces");

注意双反斜杠，这是必需的。

小开

虽然它是 在 HTML 中的 ID 属性值中使用空格在技术上是无效的，但实际上可以使用 jQuery 选择它。

见 http://mothereffingcssescapes.com/#content%20module:

<script>
// document.getElementById or similar
document.getElementById('content module');
// document.querySelector or similar
$('#content\\ module');
</script>

JQuery 使用类似于 SelectorsAPI 的语法，因此可以使用 $('#content\\ module');来选择带有 id="content module"的元素。

要定位 CSS 中的元素，您可以这样转义它:

<style>
#content\ module {
background: hotpink;
}
</style>
小开

如果您希望元素具有 id 的精确值，那么这个方法可以工作

$("[id='content Module']").whatever();

但是如果您想检查元素是否只有其中的一个(就像 class 一样)有或没有其他 id

$("[id~='content']").whatever();

这将选择元素，如果它有 id="content"或 id="content Module"或 id="content Module other_ids"

小开

我发现在我的案例中，转义不起作用，因为它用% 20替换了空间。我使用了替换，例如用一个列表项的文本替换页面的 h1。如果菜单包含:

<li id="Contact Us"\>Contact Us</li>


function setTitle(menu) {
$("h1").text( $("li#" + menu.replace(" ", "\\ ")).text() );
}
小开

在 jQuery 中，我遇到了包含逗号和/或空格的元素 id 的问题，所以我这样做了，而且效果非常好:

var ele = $(document.getElementById('last, first'));

这种方法有空格，但不起作用:

var ele = $('#last, first');

这里有逗号，不起作用:

var ele = $('#last,first');

小开

转义选择器 (连同空格)上的任何混合字符。

var escapeSelector = function(string) {
string = string||"";
if (typeof string !== 'string') return false;
return string.replace( /(:|\.|\[|\]|,|=|@|\s|\(|\))/g, "\\$1" );


}
console.log($("div[data-id="+escapeSelector("Document (0).json")+"]").text());   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-id="Document (0).json">Howdy</div>


提交答案