jquery ID(공백 포함)

jquery ID(공백 포함)

ID에 공백이 있을 때 jQuery를 사용하여 DOM에서 ID로 항목을 선택하는 방법을 아는 사람이 있습니까?

예를 들어, 내 아이템의 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" +   + "Module").whatever()

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

세미콜론으로 인해 Javascript 오류가 발생할 수 있습니다.나는 또한 ID를 공백이 없도록 변경하는 것을 추천합니다.

또한, 시도해보세요.document.getElementByID("content Module")

이것은 저에게 효과가 있었습니다.

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

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

http://mothereffingcssescapes.com/ #content%20 웹 사이트를 참조하십시오.

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

요소가 ID에 대한 정확한 값을 가지길 원한다면 이것은 작동할 수 있습니다.

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

그러나 요소에 다른 ID가 있는지 여부를 확인하려면(클래스와 동일) 다른 ID가 있는지 여부를 확인합니다.

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

요소가 다음과 같은 경우 요소가 선택됩니다.id="content"또는id="content Module"또는id="content Module other_ids"

저의 경우 공간을 %20으로 대체하기 때문에 이스케이프가 작동하지 않는다는 것을 알게 되었습니다.페이지의 h1을 목록 항목의 텍스트로 대체하는 대신 replace를 사용했습니다.메뉴에 다음이 포함된 경우:

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

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

jQuery에서 쉼표 및/또는 공백이 포함된 요소 ID에 문제가 있어서 이 작업을 수행했는데 매우 효과적이었습니다.

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

공백이 있고 작동하지 않습니다.

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

쉼표가 있고 작동하지 않습니다.

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

셀렉터의 모든 misc 문자(공백 포함)를 이스케이프합니다.

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>

언급URL : https://stackoverflow.com/questions/596314/jquery-ids-with-spaces