带有空格的jQuery ID答案

【问题标题】：jquery IDs with spaces带有空格的jQuery ID
【发布时间】：2020-03-04 01:13:15
【问题描述】：

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

例如，我的商品的 ID 是

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

如何使用 jQuery 选择它？

如果我这样做

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

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

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

【问题讨论】：

@Glavić 你的所有陈述都是真实的。但是，新接受的答案对真正需要此解决方案的人会更有帮助。对于那些真正陷入困境的人来说，知道如何处理空间才是他们真正需要的。
是的，确实如此，但我的回答也有带空格的 ID 解决方案，甚至加粗；）
赞成正确书写 ID 而不是 ID。对不起，小毛病。是的，我知道大多数人使用撇号来表示首字母缩略词和缩写词的复数形式，但在我看来它仍然像杂货店的撇号 walkinthewords.blogspot.com/2009/05/grocers-apostrophe.html

标签： jquery

【解决方案1】：

使用属性选择器。

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

或者，最好也指定标签：

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

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

【讨论】：

即使是 Glavic 的回答也是最好的建议。我认为这个答案解决了问题:)
这对我帮助很大。我正在通过 ajax 阅读一些糟糕的 HTML，并且无法控制 HTML 的结构或 ID 的格式。他们的 ID 中有空格，所以 Elliot 的回答很有帮助，而 glavic 的回答根本没有帮助。
谢谢，很好的回答！

【解决方案2】：

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

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

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

类似线程> What are valid values for the id attribute in HTML?

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

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

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

【讨论】：

+1。遵循命名标准，当你不遵循它们时，你不必想出解决方法。
这引发了截断显示的第二个单词的想法，以便我拥有有效的 id。解决了这个问题，谢谢！
您在这里引用了 HTML 4.01 规范。虽然仍然不允许在 ID 属性值中使用空格字符，但 HTML5 确实摆脱了大多数这些限制：mathiasbynens.be/notes/html5-id-class
不要仅仅因为“标准”就告诉他去破解旧项目的整个代码库。最多，这应该对评论进行评分，当然不是公认的答案:(
有趣。空间在大多数情况下都可以正常工作，为什么要让它们不标准？

【解决方案3】：

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

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

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

【讨论】：

如果 JavaScript 本身是其他语言的字符串常量，则最多 4 个反斜杠。
如果另一种语言本身是另一种语言的字符串常量，则最多 8 个反斜杠 :)
这会在字符串被递归转义时出现堆栈溢出

【解决方案4】：

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

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

【讨论】：

啊！应该进一步向下滚动！

【解决方案5】：

一个尝试的想法：

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

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

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

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

【讨论】：

document.getElementByID 会给我常规对象，然后我无法执行我正在寻找的 jQuery 函数。但是，在类似的情况下，这将是一个很好的解决方法。
不会$(document.getElementByID("content Module")) 给你一个 jquery 对象吗？

【解决方案6】：

这对我有用。

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案8】：

如果您希望元素具有 id 的确切值，这可以工作

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

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

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

这将选择具有id="content" 或id="content Module" 或id="content Module other_ids" 的元素

【讨论】：

【解决方案9】：

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

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

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

【讨论】：

【解决方案10】：

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

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

这有空格，不起作用：

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

这有逗号，不起作用：

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

【讨论】：

【解决方案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>

【讨论】：