Question

当该ID有空格时，是否有人知道如何使用jQuery通过ID选择DOM中的项目？

例如，我的项目的ID将是

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

我如何用jQuery选择它？

如果我这样做

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

jQuery将尝试查找包含内容ID和Module ID的项目，这不是我想要的。

我应该补充一点，我正在使用旧的代码库，其中广泛使用这两个单词ID，因此浏览并更改所有ID都会很糟糕。

Answer 1

使用属性选择器。

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

或者，更好的是，同时指定标签：

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

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

Answer 2

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

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

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

类似的主题＆gt; What are valid values for the id attribute in HTML?

修改： HTML 4.01和HTML5之间ID的差异

HTML5摆脱了对id属性的额外限制。该只剩下要求 - 除了在文件中是独一无二的 - 是该值必须至少包含一个字符（不能为空），并且它不能包含任何空格字符。

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

Answer 3

万一有人好奇，我发现逃离空间会起作用，也许效果最好。当您无法控制目标DOM（即用户脚本）时，这尤其有用：

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

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

Answer 4

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

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

Answer 5

尝试尝试：

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

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

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

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

Answer 6

这对我有用。

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

Answer 7

虽然它是technically invalid to have a space in an ID attribute value in HTML，但您实际上可以使用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>

Answer 8

如果您希望元素具有id

的确切值，则可以使用此方法

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

但是如果你想检查元素中是否只有一个（就像类一样）有或没有其他ID

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

如果元素有id="content"或id="content Module"或id="content Module other_ids"

，则会选择该元素

Answer 9

我发现我的情况是逃避不起作用，因为它用％20替换了空格。我使用替换，例如用列表项的文本替换页面的h1。如果菜单包含：

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

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

Answer 10

我在jQuery中遇到包含逗号和/或空格的元素ID的问题，所以我这样做了，它就像一个魅力：

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

这有空格，不起作用：

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

这有逗号但不起作用：

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

Answer 11

在选择器（以及空格）上转义任何其他字符。

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>

带空格的jquery ID

11 个答案: