วิธีเลือกองค์ประกอบที่ไม่มีคลาสเฉพาะ


94

ฉันสงสัยว่าจะเลือกองค์ประกอบที่ไม่มีคลาสเฉพาะโดยใช้ JavaScript ไม่ใช่ jQuery ได้อย่างไร

ตัวอย่างเช่นฉันมีรายการนี้:

<ul id="tasks">
  <li class="completed selected">One Task</li>
  <li>Two Task</li>
</ul>

และฉันเลือกงานที่เสร็จสมบูรณ์โดย:

var completeTask = document.querySelector("li.completed.selected");

แต่ฉันไม่แน่ใจว่าจะเลือกรายการที่ไม่มีคลาสเหล่านั้นได้อย่างไร

คำตอบ:


171

สิ่งนี้เลือกLIองค์ประกอบที่สอง

document.querySelector("li:not([class])")

หรือ

document.querySelector("li:not(.completed):not(.selected)")

ตัวอย่าง:

// select li which doesn't have a 'class' attribute...
console.log(document.querySelector("li:not([class])"))

// select li which doesn't have a '.completed' and a '.selected' class...
console.log(document.querySelector("li:not(.completed):not(.selected)"))
 <ul id="tasks">
    <li class="completed selected">One Task</li>
    <li>Two Task</li>
  </ul>


17

ในการเลือก<li>ที่ไม่มีcompletedหรือselectedคลาส:

document.querySelector("li:not(.completed):not(.selected)");

ซอ

http://jsfiddle.net/Z8djF/


วิธีทำย้อนกลับ : นั่นคือเลือกองค์ประกอบทั้งหมดที่มีทั้งสองอย่างcompletedและselectedคลาส?
user2284570

@ user2284570 เพียงแค่เขียนทั้งสองคลาสโดยไม่มีช่องว่าง: li.completed.selected-> สิ่งนี้จะจับคู่liองค์ประกอบทั้งหมดที่มีcompletedANDselectedคลาส
BeNdErR



1

ลองรับอาร์เรย์ของลูก ๆ ของผู้ปกครองแทน:

var completeTask = document.querySelector("#tasks").childNodes;

จากนั้นวนซ้ำ / ค้นหาตามความจำเป็น

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.