ซีเลคเตอร์ has

ซีเลคเตอร์ :has จะเลือกองค์ประกอบ ที่มีอย่างน้อยหนึ่งองค์ประกอบภายใน ตามซีเลคเตอร์ที่กำหนด ไม่จำเป็นต้องเป็น ลูกโดยตรง เนื่องจาก :has ไม่ได้อยู่ในข้อกำหนด CSS เพื่อเพิ่มประสิทธิภาพในเบราว์เซอร์สมัยใหม่ ควรใช้ $("CSS selector ของคุณ").has(selector/DOM element) แทน

ไวยากรณ์

นี่คือวิธีเลือกองค์ประกอบ:

javascript$(':has(selector)');

นี่คือวิธีเลือกองค์ประกอบ หากต้องการให้ ซีเลคเตอร์ซ้อนกันโดยตรง:

javascript$(':has(>selector)');

ตัวอย่าง

มาเลือกเฉพาะย่อหน้าที่มี แท็ก b อยู่ภายใน และเพิ่มข้อความ '!!!' ที่ส่วนท้าย:

html<p>text</p>
<p>text</p>
<p><b>bold</b> text</p>
<p><b>bold</b> text</p>

javascript$('p:has(b)').append('!!!');

โค้ด HTML จะกลายเป็นดังนี้:

html<p>text</p>
<p>text</p>
<p><b>bold</b> text!!!</p>
<p><b>bold</b> text!!!</p>

ดูเพิ่มเติม