การเพิ่มคลาสให้กับองค์ประกอบใน jQuery
ขอเตือนว่าในแอตทริบิวต์
class
ในโค้ด HTML สามารถเขียนคลาสได้หลายคลาสโดยคั่นด้วยช่องว่าง
ลองนึกถึงสถานการณ์เช่นนี้ - คุณต้องการ
เพิ่มคลาสใหม่เข้าไปในคลาสที่มีอยู่ โดยไม่เขียนทับ
คลาสเหล่านั้น ในกรณีนี้ แค่ใช้
.attr('class', 'new-class')
จะไม่ได้ผล (โดยใช้เมธอด
attr)
- คุณจะเขียนทับคลาสที่
มีอยู่แล้วในแอตทริบิวต์
แน่นอนว่า คุณสามารถอ่านค่าคลาส
ที่มีอยู่ก่อนได้ จากนั้นเพิ่มคลาสของเรา
เข้าไปโดยคั่นด้วยช่องว่าง แล้วเขียนทั้งหมดกลับ
เข้าไปในแอตทริบิวต์ แต่มีวิธีที่ง่ายกว่านั้น - ใน jQuery
มีเมธอดที่เตรียมไว้สำหรับสิ่งเหล่านี้คือ
addClass
เมธอด addClass ช่วยให้เพิ่ม
คลาสให้กับองค์ประกอบ (หรือองค์ประกอบต่างๆ) ได้ โดยไม่เขียนทับ
คลาสอื่นๆ คลาสที่คุณ
ต้องการเพิ่มให้องค์ประกอบ รับเข้ามาเป็น
พารามิเตอร์ของเมธอดนี้
ในตัวอย่างต่อไปนี้ เรามีองค์ประกอบที่มี
สองคลาส - class="www zzz":
<p class="www zzz" id="test">text</p>
เราสามารถเพิ่มคลาสที่สามให้มันได้ -
kkk ผลลัพธ์ที่ได้ในแอตทริบิวต์
จะเป็นดังนี้ - class="www zzz kkk":
$('#test').addClass('kkk');
โค้ด HTML จะมีลักษณะดังนี้:
<p class="www zzz kkk" id="test">text</p>
เพิ่มคลาส test ให้กับทุก ๆ li
