.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