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.


@ 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.


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


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.


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) ... ;

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


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'));

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>

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"


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() );
}

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');


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>

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.