หน้าแรก

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


.addClass(class) Returns: jQuery

คำสั่ง .addClass ใช้สำหรับเพิ่ม class ให้ กับ DOM โดย class นั้นจะโดนเพิ่มเข้าไป โดยไม่ได้ทำการ replace class ที่มีก่อนหน้า หากต้องการ replace เลย เราสามารถใช้คำสั่ง .attr(‘class’,'className’) ได้ หากต้องการเพิ่มครั้งละหลายๆ class สามารถเพิ่มได้โดยการคั่นแต่ละ class ด้วย space

<a title="เว็บ สอน jQuery" rel="เว็บ สอน jQuery" class="red" href="http://www.jquerythai.com">jquerythai</a>

ทดลองใช้คำสั่ง .addClass และ คำสั่ง .attr

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

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

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

    <ul>
		<li>line0</li>
		<li>line1</li>
		<li>line2</li>
		<li>line3</li>
		<li>line4</li>
	</ul>

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

       jQuery('ul li').addClass(function(){
			return 'li-'+$(this).index();
	   });    
 
// ผลที่ได้คือ	   
<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>

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

    <ul>
		<li class="aaa">line0</li>
		<li class="bbb">line1</li>
		<li class="ccc">line2</li>
	</ul>

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

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

ผลทีไ่ด้คือ

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

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


jQuery คำสั่งแอททริบิวท์ .prop() jQuery คำสั่งคลาส .removeClass()
บทความที่เกี่ยวข้อง

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