Identyfikatory jquery ze spacjami

127

Czy ktoś wie, jak wybrać element w DOM według identyfikatora z jQuery, gdy ten identyfikator ma spację?

Na przykład identyfikator mojego przedmiotu to

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

Jak mam to wybrać w jQuery?

Jeśli po prostu to zrobię

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

jQuery spróbuje znaleźć element z zarówno identyfikatorem zawartości, jak i identyfikatorem modułu, co nie jest tym, czego szukam.

Powinienem dodać, że pracuję ze starą bazą kodu, w której te dwa identyfikatory słów są szeroko używane, więc przeglądanie i zmienianie wszystkich identyfikatorów byłoby złe.

Jeff Davis
źródło
@ Glavić Wszystkie twoje stwierdzenia są prawdziwe. Jednak nowo przyjęta odpowiedź będzie bardziej pomocna dla osób, które naprawdę potrzebują tego rozwiązania. Dla tych, którzy naprawdę utknęli, wiedza, jak radzić sobie z przestrzenią, jest tym, czego naprawdę potrzebują.
Jeff Davis
Tak, to prawda, ale moja odpowiedź ma również rozwiązanie dla identyfikatorów ze spacjami, jest nawet pogrubione;)
Glavić
1
Głosuj za poprawnym pisaniem identyfikatorów zamiast identyfikatorów. Przepraszam, wkurzony. I tak, wiem, że większość ludzi używa apostrofu do tworzenia liczby mnogiej akronimów i skróconych słów, ale nadal wygląda to dla mnie jak apostrof sklepu spożywczego walkinthewords.blogspot.com/2009/05/grocers-apostrophe.html
Juan Mendes

Odpowiedzi:

253

Użyj selektora atrybutu.

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

Lub, lepiej, określ również tag:

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

Zwróć uwagę, że w przeciwieństwie do $ ('# id'), to zwróci wiele elementów, jeśli masz wiele elementów o tym samym identyfikatorze na swojej stronie.

Elliot Nelson
źródło
1
nawet odpowiedź od Glavica jest najlepszą sugestią. myślę, że ta odpowiedź rozwiązała problem :)
GusDeCooL
8
To bardzo mi pomogło. Czytam w jakimś okropnym HTML za pośrednictwem ajax i nie mam kontroli nad strukturą HTML lub formatem identyfikatorów. Ich identyfikatory mają w sobie spacje, więc odpowiedź Elliota bardzo pomaga, podczas gdy w identyfikatorze Glavica nie ma żadnej pomocy.
świt
Dzięki, świetna odpowiedź!
alcfeoh
62

Nie używaj spacji, przyczyna jest prosta, znak spacji nie jest prawidłowy dla atrybutu ID.

Tokeny identyfikacyjne muszą zaczynać się od litery ([A-Za-z]) i mogą po nich następować dowolne litery, cyfry ([0-9]), łączniki („-”), podkreślenia („_”), dwukropki („:”) i kropki („.”).

Ale jeśli nie dbasz o standardy, spróbuj $("[id='content Module']")

Podobny wątek> Jakie są prawidłowe wartości atrybutu id w HTML?

Edycja: jak identyfikator różni się między HTML 4.01 a HTML5

HTML5 pozbywa się dodatkowych ograniczeń atrybutu id. Jedyne wymagania, jakie pozostały - poza tym, że są unikalne w dokumencie - to, że wartość musi zawierać co najmniej jeden znak (nie może być pusta) i nie może zawierać żadnych znaków spacji.

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

Glavić
źródło
4
+1. Postępując zgodnie ze standardami nazewnictwa, nie musisz wymyślać obejść, gdy ich nie przestrzegasz.
mat b
To wywołało pomysł obcięcia drugiego wyświetlanego słowa, aby uzyskać prawidłowe identyfikatory. Zajęłam się problemem, dzięki!
Jeff Davis,
1
Cytujesz tutaj specyfikację HTML 4.01. Chociaż nadal nie można używać znaków spacji w wartościach atrybutów ID, HTML5 eliminuje większość z tych ograniczeń: mathiasbynens.be/notes/html5-id-class
Mathias Bynens
2
Nie mów mu, żeby przeszedł i zhakował całą bazę kodu starego projektu tylko z powodu „standardów”. Co najwyżej powinno to oceniać komentarz, a na pewno nie zaakceptowaną odpowiedź :(
Coderer
Zabawny. Przestrzenie działają dobrze w większości zastosowań, dlaczego mają być niestandardowe?
Lodewijk
23

Na wypadek gdyby ktoś był ciekawy, odkryłem, że ucieczka z kosmosu będzie działać. Jest to szczególnie przydatne, gdy nie masz kontroli nad docelowym DOM (np. Z poziomu skryptu użytkownika):

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

Zwróć uwagę na podwójny lewy ukośnik, który jest wymagany.

Morgon
źródło
Następnie do 4 odwrotnych ukośników, jeśli sam JavaScript jest stałą łańcuchową w innym języku.
Brilliand,
2
Następnie do 8 odwrotnych ukośników, jeśli ten inny język sam jest stałą łańcuchową w jeszcze innym języku :)
daniel1426
1
Powoduje to przepełnienie stosu, gdy ciąg znaków jest uciekany rekurencyjnie
Jeff Davis,
7

Metoda sugerowana przez Chrisa może być prawdopodobnie przystosowana do pracy z funkcjami jQuery.

var element = document.getElementById('content Module');
$(element) ... ;
ceejayoz
źródło
1
Ahhh! Powinienem był przewinąć dalej!
gotomanners
2

Pomysł do wypróbowania:

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

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

Średnik może spowodować błąd javascript. Zalecam również zmianę ID, aby nie było spacji.

Spróbuj też document.getElementByID("content Module")

Chris Klepeis
źródło
1
document.getElementByID dałoby mi zwykły obiekt, a następnie nie mogłem wykonać funkcji jQuery, których szukam. Jednak w podobnych okolicznościach byłoby to dobre obejście.
Jeff Davis,
1
Nie $(document.getElementByID("content Module"))dałby ci obiektu jquery?
gotomanners
1

To zadziałało dla mnie.

document.getElementById(escape('content Module'));
xxx
źródło
0

Chociaż z technicznego punktu widzenia spacja w wartości atrybutu identyfikatora w HTML jest niepoprawna , w rzeczywistości można ją wybrać za pomocą jQuery.

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

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

jQuery używa składni podobnej do interfejsu API Selectors, więc możesz użyć $('#content\\ module');do wybrania elementu za pomocą id="content module".

Aby wskazać element w CSS, możesz uniknąć tego w następujący sposób:

<style>
  #content\ module {
    background: hotpink;
  }
</style>
Mathias Bynens
źródło
0

może to zadziałać, jeśli chcesz, aby element miał dokładną wartość identyfikatora

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

ale jeśli chcesz sprawdzić, czy element ma tylko jeden z nich (tak jak class) z innymi identyfikatorami lub bez nich

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

spowoduje to wybranie elementu, jeśli ma id="content"lub id="content Module"lubid="content Module other_ids"

Robert
źródło
0

W moim przypadku stwierdziłem, że ucieczka nie zadziałała, ponieważ zastępuje spacje% 20. Zamiast tego użyłem zamiany, aby np. Zamienić h1 strony na tekst elementu listy. Jeśli menu zawiera:

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

function setTitle(menu) {
    $("h1").text( $("li#" + menu.replace(" ", "\\ ")).text() );
}
Jaskółka oknówka
źródło
0

Miałem problemy z identyfikatorami elementów zawierającymi przecinki i / lub spacje w jQuery, więc zrobiłem to i zadziałało to cudownie:

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

Ma spacje i nie działa:

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

To ma przecinek i nie działa:

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

Steven Spungin
źródło
0

Zmiana znaczenia dowolnego innego znaku na selektorze (wraz ze spacjami) .

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>

Donovan P
źródło