blocks|key|1616242|text|使用属性选择器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1616243|$("[id='content+Module']").whatever();|code-block|syntax|javascript|1616244|或者，更好的做法是指定标记：|1616245|$("div[id='content+Module']").whatever();|1616246|注意，与$('#+id+')不同，如果页面中有多个具有相同id的元素，这将返回多个元素。|1616247|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Use an attribute selector.

<pre><code>$("[id='content Module']").whatever();
</code></pre>

Or, better, specify the tag as well:

<pre><code>$("div[id='content Module']").whatever();
</code></pre>

Note that unlike $('#id'), this will return multiple elements if you have multiple elements with the same id within your page.

blocks|key|1401537|text|为了防止任何人感到好奇，我发现逃离这个空间是可行的。当您无法控制目标DOM+(例如，从用户脚本中)时，这特别有用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1401538|$("#this\\+has\\+spaces");|code-block|syntax|javascript|1401539|注意双反斜杠，这是必需的。|1401540|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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):

<pre><code>$("#this\\ has\\ spaces");
</code></pre>

Note the double-backslash, which is required.

blocks|key|1401401|text|克里斯建议的方法很可能适用于jQuery函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1401402|var+element+=+document.getElementById('content+Module');
$(element)+...+;|code-block|syntax|javascript|1401403|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The method Chris suggested can likely be adapted to work with jQuery functions.

<pre><code>var element = document.getElementById('content Module');
$(element) ... ;
</code></pre>

blocks|key|1616097|text|一个可以尝试的想法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1616098|$("#content"+%2B+&amp;#032;+%2B+"Module").whatever()

$("#content"+%2B+%2520+%2B+"Module").whatever()|code-block|syntax|javascript|1616099|分号可能会导致javascript错误。我还建议将ID更改为不包含任何空格。|1616100|另外，请尝试document.getElementByID("content+Module")|offset|length|style|CODE|1616101|entityMap^0|0|0|0|6|15|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

An idea to try:

<pre><code>$("#content" + &amp;amp;#032; + "Module").whatever()

$("#content" + %20 + "Module").whatever()
</code></pre>

The semicolon may cause a javascript error. I also recommend changing the ID to not have any spaces.

Also, try <code>document.getElementByID("content Module")</code>

blocks|key|1616256|text|这对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1616257|document.getElementById(escape('content+Module'));|code-block|syntax|javascript|1616258|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This worked for me.

<pre><code>document.getElementById(escape('content Module'));
</code></pre>

blocks|key|1616398|text|虽然它是technically+invalid+to+have+a+space+in+an+ID+attribute+value+in+HTML，但实际上您可以使用jQuery选择它。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1616399|请参阅http://mothereffingcssescapes.com/#content%2520module|1616400|<script>
++//+document.getElementById+or+similar
++document.getElementById('content+module');
++//+document.querySelector+or+similar
++$('#content\\+module');
</script>|code-block|syntax|javascript|1616401|jQuery使用类似于选择器API的语法，因此您可以使用$('#content\\+module');和id="content+module"来选择元素。|style|CODE|1616402|要以CSS中的元素为目标，可以像这样转义它：|1616403|<style>
++#content\+module+{
++++background:+hotpink;
++}
</style>|1616404|entityMap|0|LINK|mutability|MUTABLE|url|http://mathiasbynens.be/notes/html5-id-class|1|http://mothereffingcssescapes.com/#content%2520module^0|4|1W|0|0|3|1F|1|0|0|S|N|1G|J|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|F|3|G|5|H|7|1A|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1B|8|@$A|1C|B|1D|M|N]|$A|1E|B|1F|M|N]]|9|@]|C|$]]|$1|O|3|P|5|6|7|1G|8|@]|9|@]|C|$]]|$1|Q|3|R|5|H|7|1H|8|@]|9|@]|C|$I|J]]|$1|S|3|-4|5|6|7|1I|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|11]]]]

While it’s <a href="http://mathiasbynens.be/notes/html5-id-class" rel="nofollow">technically invalid to have a space in an ID attribute value in HTML</a>, you can actually select it using jQuery.

See <a href="http://mothereffingcssescapes.com/#content%20module" rel="nofollow">http://mothereffingcssescapes.com/#content%20module</a>:

<pre><code>&lt;script&gt;
 // document.getElementById or similar
 document.getElementById('content module');
 // document.querySelector or similar
 $('#content\\ module');
&lt;/script&gt;
</code></pre>

jQuery uses a Selectors API-like syntax, so you could use <code>$('#content\\ module');</code> to select the element with <code>id="content module"</code>.

To target the element in CSS, you could escape it like this:

<pre><code>&lt;style&gt;
 #content\ module {
 background: hotpink;
 }
&lt;/style&gt;
</code></pre>

blocks|key|1616455|text|如果您希望元素具有与id完全相同的值，则可以使用此方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1616456|$("[id='content+Module']").whatever();|code-block|syntax|javascript|1616457|但是，如果您想检查元素是否只有一个if+(就像class一样)，是否有其他if|1616458|$("[id~='content']").whatever();|1616459|如果元素具有id="content"、id="content+Module"或id="content+Module+other_ids"，则会选择该元素|offset|length|style|CODE|1616460|entityMap^0|0|0|0|0|6|C|J|J|13|T|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]|$M|Z|N|10|O|P]|$M|11|N|12|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|R|$]]

this can work if you want the element have the exact value for the id

<pre><code>$("[id='content Module']").whatever();
</code></pre>

but if you want to check if element have only one of them ( just like class ) with or without other ids

<pre><code>$("[id~='content']").whatever();
</code></pre>

this will select the element if it has <code>id="content"</code> or <code>id="content Module"</code> or <code>id="content Module other_ids"</code>

blocks|key|1616508|text|我发现对于我的情况，转义不起作用，因为它将空格替换为%2520。我使用替换，例如，将页面的h1替换为列表项的文本。如果菜单包含：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1616509|<li+id="Contact+Us"\>Contact+Us</li>

function+setTitle(menu)+{
++++$("h1").text(+$("li#"+%2B+menu.replace("+",+"\\+")).text()+);
}|code-block|syntax|javascript|1616510|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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:

<pre><code>&lt;li id="Contact Us"\&gt;Contact Us&lt;/li&gt;

function setTitle(menu) {
 $("h1").text( $("li#" + menu.replace(" ", "\\ ")).text() );
}
</code></pre>

blocks|key|1401800|text|我在jQuery中遇到了包含逗号和/或空格的元素it的问题，所以我这样做了，它就像一个护身符：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1401801|var+ele+=+$(document.getElementById('last,+first'));|offset|length|style|CODE|1401802|这包含空格，并且不起作用：|1401803|var+ele+=+$('#last,+first');|1401804|这包含逗号，并且不起作用：|1401805|var+ele+=+$('#last,first');|1401806|entityMap^0|0|0|1G|0|0|0|S|0|0|0|R|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@$D|T|E|U|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|V|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|W|8|@$D|X|E|Y|F|G]]|9|@]|A|$]]|$1|L|3|M|5|6|7|Z|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|10|8|@$D|11|E|12|F|G]]|9|@]|A|$]]|$1|P|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|Q|$]]

I was having issues with element ids containing commas and/or spaces in jQuery, so I did this and it worked like a charm:

<code>var ele = $(document.getElementById('last, first'));</code>

This has spaces and does not work:

<code>var ele = $('#last, first');</code>

This has comma and does not work:

<code>var ele = $('#last,first');</code>

Does anyone know how to select an item in the DOM by ID with jQuery, when that ID has a space? 

For example, the ID of my item would be

<pre><code>&lt;div id="content Module"&gt;Stuff&lt;/div&gt;
</code></pre>

How would I select this with jQuery? 

If I just do 

<pre><code>$("#content Module").whatever() 
</code></pre>

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.

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.

jquery IDs with spaces

jQuery

当ID包含空格时，有人知道如何使用jQuery按ID选择DOM中的项吗？例如，我的项目的ID为<div id="content Module">Stuff</div>如何使用jQuery选择此选项？如果我只是这样做$("#content Module").whatever() jQuery将尝试查找同时具有内容ID和模块ID的项，但这不是我要查找的项。我应该补充的是，我使用的是一个旧的代码库，其中

问带空格的jquery ID
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带空格的jquery IDEN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带空格的jquery ID
EN