jquery ID ที่มีช่องว่าง

ไม่มีใครรู้วิธีเลือกรายการใน DOM by ID ด้วย jQuery เมื่อ ID นั้นมีช่องว่าง

ตัวอย่างเช่น ID ของรายการของฉันจะเป็น

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

ฉันจะเลือกสิ่งนี้กับ jQuery ได้อย่างไร

ถ้าฉันแค่ทำ

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

jQuery จะพยายามค้นหารายการที่มีทั้ง ID ของเนื้อหาและ ID ของโมดูลซึ่งไม่ใช่สิ่งที่ฉันกำลังมองหา

ฉันควรเพิ่มว่าฉันกำลังทำงานกับฐานรหัสเก่าที่มีการใช้รหัสคำสองคำนี้อย่างกว้างขวางดังนั้นการดำเนินการและเปลี่ยนรหัสทั้งหมดจะไม่ดี

ใช้ตัวเลือกแอตทริบิวต์

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

หรือให้ระบุแท็กด้วย:

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

โปรดทราบว่าไม่เหมือนกับ $ ('# id') ซึ่งจะส่งคืนองค์ประกอบหลายรายการหากคุณมีหลายองค์ประกอบที่มีรหัสเดียวกันภายในเพจของคุณ

อย่าใช้ช่องว่างเหตุผลนี้ง่ายอักขระช่องว่างไม่ถูกต้องสำหรับแอตทริบิวต์ ID

โทเค็นรหัสต้องขึ้นต้นด้วยตัวอักษร ([A-Za-z]) และอาจตามด้วยตัวอักษรตัวเลข ([0-9]) ขีดกลาง ("-") ขีดล่าง ("_") เครื่องหมายทวิภาค (":") และจุด (".")

แต่ถ้าคุณไม่สนใจเกี่ยวกับมาตรฐานลอง $("[id='content Module']")

เธรดที่คล้ายกัน> ค่าที่ถูกต้องสำหรับแอตทริบิวต์ id ใน HTML คืออะไร

แก้ไข: id แตกต่างกันอย่างไรระหว่าง HTML 4.01 และ HTML5

HTML5 กำจัดข้อ จำกัด เพิ่มเติมเกี่ยวกับแอตทริบิวต์ id ข้อกำหนดเดียวที่เหลือนอกเหนือจากการไม่ซ้ำกันในเอกสารคือค่าต้องมีอย่างน้อยหนึ่งอักขระ (ต้องไม่ว่างเปล่า) และต้องไม่มีอักขระเว้นวรรค

ลิงก์: http://mathiasbynens.be/notes/html5-id-class

ในกรณีที่มีใครสงสัยฉันพบว่าการหนีออกจากพื้นที่จะได้ผล สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อคุณไม่สามารถควบคุม DOM เป้าหมายได้ (เช่นจากภายใน userscript):

$("#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'));

แม้ว่าในทางเทคนิคจะไม่ถูกต้องที่จะมีช่องว่างในค่าแอตทริบิวต์ ID ใน HTMLแต่คุณสามารถเลือกได้โดยใช้ 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~='content']").whatever();

สิ่งนี้จะเลือกองค์ประกอบหากมีid="content"หรือid="content Module"หรือid="content Module other_ids"

ฉันพบในกรณีของฉันว่าการ Escape ไม่ทำงานเพราะแทนที่ช่องว่างด้วย% 20 ฉันใช้การแทนที่แทนเช่นเพื่อแทนที่ h1 ของหน้าด้วยข้อความของรายการ หากเมนูประกอบด้วย:

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

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

ฉันมีปัญหากับรหัสองค์ประกอบที่มีเครื่องหมายจุลภาคและ / หรือช่องว่างใน jQuery ดังนั้นฉันจึงทำเช่นนี้และได้ผลอย่างมีเสน่ห์:

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>