ID jquery con espacios

¿Alguien sabe cómo seleccionar un elemento en el DOM por ID con jQuery, cuando esa ID tiene un espacio?

Por ejemplo, la identificación de mi artículo sería

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

¿Cómo seleccionaría esto con jQuery?

Si solo lo hago

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

jQuery intentará encontrar un elemento con la ID del contenido y la ID del módulo, que no es lo que estoy buscando.

Debo agregar que estoy trabajando con una antigua base de código donde estos identificadores de dos palabras se usan ampliamente, por lo que revisar y cambiar todas las ID sería malo.

Utiliza un selector de atributos.

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

O, mejor, especifique también la etiqueta:

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

Tenga en cuenta que, a diferencia de $ ('# id'), esto devolverá varios elementos si tiene varios elementos con la misma identificación dentro de su página.

No use espacios, la razón de esto es simple, el carácter de espacio no es válido para el atributo ID.

Los tokens de ID deben comenzar con una letra ([A-Za-z]) y pueden ir seguidos de cualquier número de letras, dígitos ([0-9]), guiones ("-"), guiones bajos ("_"), dos puntos (":") y puntos (".").

Pero si no te importan los estándares prueba $("[id='content Module']")

Tema similar> ¿Cuáles son los valores válidos para el atributo id en HTML?

Editar: cómo la identificación difiere entre HTML 4.01 y HTML5

HTML5 elimina las restricciones adicionales en el atributo id. Los únicos requisitos restantes, además de ser únicos en el documento, son que el valor debe contener al menos un carácter (no puede estar vacío) y que no puede contener ningún espacio.

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

En caso de que alguien tenga curiosidad, descubrí que escapar del espacio funcionará. Esto es particularmente útil cuando no tienes control sobre el DOM objetivo (por ejemplo, desde un script de usuario):

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

Tenga en cuenta la doble barra invertida, que se requiere.

El método que Chris sugirió probablemente se pueda adaptar para trabajar con funciones jQuery.

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

Una idea para probar:

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

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

El punto y coma puede causar un error de JavaScript. También recomiendo cambiar la ID para no tener espacios.

Intenta también document.getElementByID("content Module")

Esto funcionó para mí.

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

Si bien es técnicamente inválido tener un espacio en un valor de atributo ID en HTML , en realidad puede seleccionarlo usando jQuery.

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

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

jQuery usa una sintaxis similar a la API de Selectores, por lo que puede usar $('#content\\ module');para seleccionar el elemento conid="content module" .

Para apuntar al elemento en CSS, puede escapar de este modo:

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

Esto puede funcionar si desea que el elemento tenga el valor exacto para la identificación

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

pero si desea verificar si el elemento tiene solo uno de ellos (al igual que la clase) con o sin otros identificadores

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

esto seleccionará el elemento si tiene id="content"o id="content Module"oid="content Module other_ids"

En mi caso, descubrí que escape no funcionaba porque reemplaza los espacios con% 20. Solía ​​reemplazar, por ejemplo, para reemplazar el h1 de la página con el texto de un elemento de la lista. Si el menú contiene:

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

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

Estaba teniendo problemas con los identificadores de elementos que contienen comas y / o espacios en jQuery, así que hice esto y funcionó de maravilla:

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

Esto tiene espacios y no funciona:

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

Esto tiene coma y no funciona:

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

Escapar de cualquier carácter misceláneo en el selector (junto con espacios) .

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>