IDs de jquery com espaços

Alguém sabe como selecionar um item no DOM por ID com jQuery, quando esse ID possui um espaço?

Por exemplo, o ID do meu item seria

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

Como eu selecionaria isso com o jQuery?

Se eu apenas fizer

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

O jQuery tentará encontrar um item com o ID do conteúdo e o ID do módulo, que não é o que estou procurando.

Devo acrescentar que estou trabalhando com uma antiga base de código em que esses dois IDs de palavras são usados ​​extensivamente, portanto, passar e alterar todos os IDs seria ruim.

Use um seletor de atributos.

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

Ou melhor, especifique também a tag:

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

Observe que, diferentemente de $ ('# id'), isso retornará vários elementos se você tiver vários elementos com o mesmo ID em sua página.

Não use espaços, o motivo é simples, o caractere de espaço não é válido para o atributo de ID.

Os tokens de identificação devem começar com uma letra ([A-Za-z]) e podem ser seguidos por qualquer número de letras, dígitos ([0-9]), hífens ("-"), sublinhados ("_"), dois pontos (":") e pontos (".").

Mas se você não se importa com os padrões, tente $("[id='content Module']")

Tópico semelhante> Quais são os valores válidos para o atributo id em HTML?

Editar: como a identificação difere entre HTML 4.01 e HTML5

O HTML5 se livra das restrições adicionais no atributo id. Os únicos requisitos restantes - além de exclusivos no documento - são que o valor deve conter pelo menos um caractere (não pode estar vazio) e que não pode conter caracteres de espaço.

Link: http://mathiasbynens.be/notes/html5-id-class

Apenas no caso de alguém estar curioso, descobri que escapar do espaço funcionará. Isso é particularmente útil quando você não tem controle sobre o DOM de destino (por exemplo, dentro de um script de usuário):

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

Observe a barra invertida dupla, que é necessária.

O método sugerido por Chris provavelmente pode ser adaptado para trabalhar com funções jQuery.

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

Uma ideia para tentar:

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

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

O ponto e vírgula pode causar um erro de javascript. Também recomendo alterar o ID para não ter espaços.

Tente também document.getElementByID("content Module")

Isso funcionou para mim.

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

Embora seja tecnicamente inválido ter um espaço em um valor de atributo de ID em HTML , você pode realmente selecioná-lo usando o jQuery.

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

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

O jQuery usa uma sintaxe semelhante à API do Selectors, para que você possa usar $('#content\\ module');para selecionar o elemento comid="content module" .

Para direcionar o elemento em CSS, você pode escapar assim:

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

isso pode funcionar se você quiser que o elemento tenha o valor exato para o ID

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

mas se você quiser verificar se o elemento possui apenas um deles (como a classe) com ou sem outros IDs

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

isso selecionará o elemento se tiver id="content"ou id="content Module"ouid="content Module other_ids"

Descobri no meu caso que o escape não funcionava porque substitui os espaços por% 20. Eu usei substituir, por exemplo, para substituir o h1 da página pelo texto de um item da lista. Se o menu contiver:

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

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

Eu estava tendo problemas com os IDs de elementos que continham vírgulas e / ou espaços no jQuery, então fiz isso e funcionou como um encanto:

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

Isso tem espaços e não funciona:

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

Isso tem vírgula e não funciona:

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

Escapa de qualquer caractere variado no seletor (junto com espaços) .

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>