ID jquery con spazi

Qualcuno sa come selezionare un elemento nel DOM per ID con jQuery, quando quell'ID ha uno spazio?

Ad esempio, l'ID del mio articolo sarebbe

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

Come lo selezionerei con jQuery?

Se solo lo facessi

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

jQuery proverà a trovare un elemento con sia l'ID del contenuto sia l'ID del modulo, che non è quello che sto cercando.

Dovrei aggiungere che sto lavorando con una vecchia base di codice in cui questi ID di due parole sono ampiamente utilizzati, quindi passare e cambiare tutti gli ID sarebbe male.

Utilizzare un selettore di attributi.

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

O, meglio, specifica anche il tag:

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

Nota che, diversamente da $ ('# id'), questo restituirà più elementi se nella tua pagina sono presenti più elementi con lo stesso ID.

Non usare spazi, il motivo è semplice, il carattere spazio non è valido per l'attributo ID.

I token ID devono iniziare con una lettera ([A-Za-z]) e possono essere seguiti da un numero qualsiasi di lettere, cifre ([0-9]), trattini ("-"), caratteri di sottolineatura ("_"), due punti (":") e punti (".").

Ma se non ti interessano gli standard, prova $("[id='content Module']")

Discussione simile> Quali sono i valori validi per l'attributo id in HTML?

Modifica: come ID differisce tra HTML 4.01 e HTML5

HTML5 elimina le restrizioni aggiuntive sull'attributo id. Gli unici requisiti rimasti - oltre ad essere univoci nel documento - sono che il valore deve contenere almeno un carattere (non può essere vuoto) e che non può contenere alcuno spazio.

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

Nel caso qualcuno fosse curioso, ho scoperto che fuggire dallo spazio funzionerà. Ciò è particolarmente utile quando non si ha il controllo sul DOM di destinazione (ad esempio all'interno di uno script utente):

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

Notare la doppia barra rovesciata, che è necessaria.

Il metodo suggerito da Chris può probabilmente essere adattato per funzionare con le funzioni jQuery.

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

Un'idea da provare:

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

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

Il punto e virgola può causare un errore javascript. Consiglio anche di cambiare l'ID per non avere spazi.

Inoltre, prova document.getElementByID("content Module")

Questo ha funzionato per me.

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

Mentre tecnicamente non è valido avere uno spazio in un valore di attributo ID in HTML , puoi effettivamente selezionarlo usando jQuery.

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

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

jQuery utilizza una sintassi simile all'API Selector, quindi è possibile utilizzare $('#content\\ module');per selezionare l'elemento con id="content module".

Per indirizzare l'elemento in CSS, è possibile evitarlo in questo modo:

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

questo può funzionare se si desidera che l'elemento abbia il valore esatto per l'id

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

ma se vuoi controllare se l'elemento ne ha solo uno (proprio come la classe) con o senza altri ID

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

questo selezionerà l'elemento se ha id="content"o id="content Module"oid="content Module other_ids"

Ho scoperto per il mio caso che escape non ha funzionato perché sostituisce gli spazi con% 20. Ho usato invece sostituire ad es. Per sostituire l'h1 della pagina con il testo di un elemento dell'elenco. Se il menu contiene:

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

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

Avevo problemi con gli ID degli elementi contenenti virgole e / o spazi in jQuery, quindi l'ho fatto e ha funzionato come un incantesimo:

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

Questo ha spazi e non funziona:

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

Questo ha una virgola e non funziona:

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

Sfuggire a qualsiasi carattere misc sul selettore (insieme agli spazi) .

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>