[jquery] 공백이있는 jquery ID

누구든지 ID가 공백이있을 때 jQuery를 사용하여 ID별로 DOM에서 항목을 선택하는 방법을 알고 있습니까?

예를 들어 내 상품의 ID는

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

jQuery로 어떻게 선택합니까?

내가 방금하면

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

jQuery는 콘텐츠 ID와 모듈 ID를 모두 가진 항목을 찾으려고 시도합니다.

이 두 단어 ID가 광범위하게 사용되는 오래된 코드베이스로 작업 중이므로 모든 ID를 거치고 변경하는 것은 좋지 않습니다.



답변

속성 선택기를 사용하십시오.

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

또는 태그를 지정하는 것이 좋습니다.

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

$ ( ‘# id’)와 달리 페이지 내에 동일한 ID를 가진 여러 요소가있는 경우 여러 요소를 반환합니다.


답변

공백을 사용하지 마십시오. 이유는 간단합니다. 공백 문자는 ID 속성에 유효하지 않습니다.

ID 토큰은 문자 ([A-Za-z])로 시작해야하며 뒤에 여러 문자, 숫자 ([0-9]), 하이픈 ( “-“), 밑줄 ( “_”), 콜론이 올 수 있습니다. ( “:”) 및 마침표 ( “.”)

그러나 표준에 관심이 없다면 $("[id='content Module']")

비슷한 스레드> HTML의 id 속성에 유효한 값은 무엇입니까?

편집 : HTML 4.01과 HTML5의 ID가 어떻게 다른지

HTML5는 id 속성에 대한 추가 제한을 제거합니다. 문서에서 고유 한 것을 제외하고 남아있는 유일한 요구 사항은 값에 하나 이상의 문자 (비어있을 수 없음)를 포함해야하며 공백 문자를 포함 할 수 없다는 것입니다.

링크 : http://mathiasbynens.be/notes/html5-id-class


답변

누군가 궁금한 점이 있다면, 탈출하는 것이 효과가 있다는 것을 알았습니다. 이는 대상 DOM을 제어 할 수없는 경우 (예 : 사용자 스크립트 내에서) 특히 유용합니다.

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

이중 백 슬래시가 필요합니다.


답변

Chris가 제안한 방법은 jQuery 함수와 함께 작동하도록 조정될 수 있습니다.

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


답변

시도 할 아이디어 :

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

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

세미콜론으로 인해 자바 스크립트 오류가 발생할 수 있습니다. 공백이 없도록 ID를 변경하는 것이 좋습니다.

또한 시도하십시오 document.getElementByID("content Module")


답변

이것은 나를 위해 일했습니다.

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


답변

HTML에서 ID 속성 값에 공백이있는 것은 기술적으로 유효하지 않지만 실제로 jQuery를 사용하여 선택할 수 있습니다.

http://mothereffingcssescapes.com/#content%20module 참조 하십시오 :

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

jQuery는 Selectors API와 유사한 구문을 사용하므로을 사용 $('#content\\ module');하여 요소를 선택할 수 있습니다 id="content module".

CSS에서 요소를 대상으로하려면 다음과 같이 이스케이프 할 수 있습니다.

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