带有空格的jquery ID

有没有人知道当ID有空格时如何通过jQuery ID在DOM中选择一个项目？

例如，我的商品的ID为

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

我将如何使用jQuery选择它？

如果我只是做

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

jQuery将尝试查找具有内容ID和模块ID的项目，这不是我想要的。

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

使用属性选择器。

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

或者，最好也指定标签：

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

请注意，与$（'＃id'）不同，如果页面中有多个具有相同ID的元素，则它将返回多个元素。

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

ID令牌必须以字母（[A-Za-z]）开头，后可以跟任意数量的字母，数字（[0-9]），连字符（“-”），下划线（“ _”），冒号（“：”）和句点（“。”）。

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

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

编辑：id如何在HTML 4.01和HTML5之间有所不同

HTML5摆脱了对id属性的其他限制。除了在文档中唯一之外，剩下的唯一要求是该值必须至少包含一个字符（不能为空），并且不能包含任何空格字符。

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

以防万一有人好奇，我发现逃脱空间是行得通的。当您无法控制目标DOM（例如，从用户脚本中）时，这特别有用：

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

请注意必须使用双反斜杠。

克里斯建议的方法很可能适用于jQuery函数。

var element = document.getElementById('content Module');
$(element) ... ;

可以尝试的想法：

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

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

分号可能会导致JavaScript错误。我还建议将ID更改为不包含任何空格。

另外，尝试 document.getElementByID("content Module")

这对我有用。

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

尽管在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使用类似于Selectors API的语法，因此您可以使用$('#content\\ module');来选择元素id="content module"。

要定位CSS中的元素，可以像这样进行转义：

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

如果您希望元素具有id的确切值，则可以使用此方法

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

但是，如果您要检查element是否只有其中一个（就像class一样），是否带有其他ID

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

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

对于我的情况，我发现转义不起作用，因为它用％20替换了空格。我用replace代替，例如用列表项的文本替换页面的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>