หน้าแรก

jQuery คำสั่งคลาส .removeClass() ใน jquery


.removeClass(class) Returns: jQuery

คำสั่ง .removeClass ใช้สำหรับลบ class ใดๆ ออกจาก DOM โดยสามารถลบครั้งละ 1 ตัว หรือหลายๆตัวในครั้งเดียวก็ได้ เช่น

 <a class="red bold underline" href="http://www.jquerythai.com">jquerythai</a>

ทดลองใช้คำสั่ง .removeClass

//ป้อน 1 class
jQuery('a').removeClass('bold');
//ผลที่ได้จะเป็น    <a class="red underline" href="http://www.jquerythai.com">jquerythai</a>
 
//ป้อน 2 class
jQuery('a').removeClass('bold underline');
//ผลที่ได้จะเป็น     <a class="red" href="http://www.jquerythai.com">jquerythai</a>

.removeClass( function(index, class)) เฉพาะ version 1.4 ขึ้นไป

ใน jQuery version 1.4 ได้มีการเพิ่มการ pass ค่า parameter ให้ คำสั่ง removeClass เป็นfunction ได้ โดยค่าที่ return จาก function จะถูกส่งไปเป็น class ให้ แก่ selector ที่ถูกเลือก และจำทำการ remove clas นั้นๆ เช่น

<ul>
	<li class="li-0">line0</li>
	<li class="li-1">line1</li>
	<li class="li-2">line2</li>
	<li class="li-3">line3</li>
	<li class="li-4">line4</li>
</ul>

ใช้คำสั่ง .removeClass โดย pass ค่า parameter เป็น function

       jQuery('ul li').removeClass(function(){
			return 'li-'+$(this).index();
	   });    
 
// ผลที่ได้คือ	   
    <ul>
		<li>line0</li>
		<li>line1</li>
		<li>line2</li>
		<li>line3</li>
		<li>line4</li>
	</ul>

การทำงานคือ ในแต่ละรอบของการวน loop จะ return ค่า class ที่ได้ไปยัง selector ตัวปัจจุบัน (ตาม index) และ จะ remove Class ที่ตรงกับค่าที่ return จาก function (ถ้ามี)

ในอีกกรณีนึงคือการ ส่งค่า parameter 2 ตัว ให้แก่ function คือ index และ className เพื่อเพิ่มความสะดวกในการจัด class เช่น

<ul>
	<li class="aaa-0">line0</li>
	<li class="bbb-1">line1</li>
	<li class="ccc-2">line2</li>
</ul>

ส่งค่า parameter ทั้ง 2 ตัวเข้าไปใน function

       jQuery('ul li').removeClass(function(index,oldClassName){
			return oldClassName+'-'+index;
	   });

ผลทีไ่ด้คือ

// ผลที่ได้คือ	   
    <ul>
		<li>line0</li>
		<li>line1</li>
		<li>line2</li>
		<li>line3</li>
		<li>line4</li>
	</ul>

เขียนโดย : tikstt
เว็บไซท์ : http://tikstt.or.hn


jQuery คำสั่งคลาส .addClass() jQuery คำสั่งคลาส .hasClass()
บทความที่เกี่ยวข้อง

ดูบทความ jquery ทั้งหมด »