공백이있는 jquery ID

공백이있는 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" +   + "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>

---

요소가 id에 대한 정확한 값을 가지길 원하는 경우 작동

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

그러나 요소에 다른 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');

---

선택기에서 기타 문자를 이스케이프 처리합니다 (공백 포함) .

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