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" + &#032; + "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
'programing' 카테고리의 다른 글
sqlAlchemy를 사용한 저장 프로시저 (0) | 2023.08.05 |
---|---|
5분마다 새로 고쳐지는 구체화된 보기 만들기 (0) | 2023.08.05 |
Axios 400 오류 요청 콜 대신에 호출합니다. (0) | 2023.08.05 |
디렉토리의 쓰기 가능 여부 결정 (0) | 2023.08.05 |
'Run With PowerShell'을 사용하여 실행할 때 다른 스크립트에서 함수 호출 (0) | 2023.08.05 |