หน้าแรก

jQuery คำสั่ง .html() ใน jquery


.html() Returns: html content

คำสั่ง .html() เป็นคำสั่งที่ใช้เรียกดู ดึงค่า text จากหน้าเว็บ page หาก selector ที่เราใช้ตรงกับ tag html มากกว่่า 1 ตัว มันจะเลือกเฉพาะตัวแรกมาแสดง โดย คำสั่ง .html() จะใกล้ัเคียงกับคำัสั่ง .text() อาจจะทำให้เกิดการสับสนได้

ถ้าเรามี html เป็น

<li class="cat-item cat-item-6">
	<ul>
		<li class="post-item post-item-64"><a  href="http://www.jquerythai.com/jquery/jquery_form_selector/">แฉ Basic jQuery selector # ตอนที่ 4 form selector</a></li>
		<li class="post-item post-item-55"><a  href="http://www.jquerythai.com/jquery/content_filter_visibility_filter_child_filter/">แฉ Basic jQuery selector # ตอนที่ 3 filter  หลากหลายรูปแบบ</a></li>
		<li class="post-item post-item-31"><a  href="http://www.jquerythai.com/jquery/basic-jquery-attribute-selector/">แฉ Basic jQuery selector # ตอนที่2 (Attribute selector)</a></li>
		<li class="post-item post-item-19"><a  href="http://www.jquerythai.com/jquery/basic-jquery-selector/">แฉ Basic jQuery selector  เปิดโปงทุกรูปแบบ   ตรงไหนดำ ตรงไหนขาว ส่วนไหนเว๊า  ส่วนไหน ว๊าว  กันไปเลย# ตอนที่1</a></li>
	</ul>
</li>
   <script>
     $(document).ready(function(){
		alert(jQuery('.post-item-31').html());
		//จะ alert ค่า <a  href="http://www.jquerythai.com/jquery/basic-jquery-attribute-selector/">แฉ Basic jQuery selector # ตอนที่2 (Attribute selector)</a>
 
		alert(jQuery('.post-item').html());
		//เนื่องจากมี match selector มากกว่า 1 ตัว ดังนั้นจะ alert ค่าตัวแรกคือ  <a  href="http://www.jquerythai.com/jquery/jquery_form_selector/">แฉ Basic jQuery selector # ตอนที่ 4 form selector</a>
 
		// หากต้องการเพียงแค่ text ไม่ต้องการให้ tag html ติดมาด้วยให้ใช้ .text() 
		alert(jQuery('.post-item-31').text());
		//จะ alert เฉพาะ text ออกมา คือ   "แฉ Basic jQuery selector # ตอนที่2 (Attribute selector)"
	});
   </script>

.html(htmlContent) Returns: jQuery

.html(htmlContent) คือการ insert text html ให้กับ selector หาก selector มี content อยู่แล้ว จะทำการ replace content นั้นทันที เช่น

	<ul>
		<li><a href="http://www.jquerythai.com">jQuerythai</a></li>
		<li></li>
		<li></li>
	</ul>
   <script>
     $(document).ready(function(){
		jQuery('li:last').html('<a href="http://www.jquerythai.com">jQuerythai</a>');
		//คำสั่งด้านบน จะทำการ insert content เข้าไปใน li ตัวสุดท้ายผลที่ได้คือ
		/*
		<ul>
			<li><a href="http://www.jquery.com">jQuery.com</a></li>
			<li></li>
			<li><a href="http://www.jquerythai.com">jQuerythai</a></li>
		</ul> 		
		*/
 
		//ถ้ามี match selector มากกว่า 1 ตัว จะ repalce html content ใน selector ***ทุกตัว***  เช่น
		jQuery('li').html('<a href="http://www.jquerythai.com">jQuerythai</a>');
		// ผลที่ได้คือ
		/*
		<ul>
			<li><a href="http://www.jquerythai.com">jQuerythai</a></li
			<li><a href="http://www.jquerythai.com">jQuerythai</a></li
			<li><a href="http://www.jquerythai.com">jQuerythai</a></li>
		</ul> 			
		*/	
	});
   </script>

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

.html(function(index, oldhtml)) โดยส่ง parameter เป็น funtion เข้าไปยังคำสั่ง html เหมือนการ run คำสั่ง foreach มักจะใช้สำหรับ filter selector เพื่อการระบุแบบเจาะจงมากขึ้น เช่น

	<ul>
		<li><a href="http://www.jquerythai.com">jQuerythai</a></li>
		<li></li>
		<li></li>
	</ul>
   <script>
   <script>
     $(document).ready(function(){
		jQuery('li').html(function(index, oldhtml){
			if(oldhtml == "")
			{
				return "รักนะ jQuery";
			}
		});
		// หาก content ของ li ตัวไหน เป็น "" ให้ทำการป้อน text รักนะ jQuery ลงไป ผลที่ไ้ด้คือ
		/*
		<ul>
		<li><a href="http://www.jquerythai.com">jQuerythai</a></li>
		<li>รักนะ jQuery</li>
		<li>รักนะ jQuery</li>
		</ul>		
		*/
	});
   </script>
   </script>

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


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

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