Aug
3
2010

การใช้งาน .prev() ของ jQuery ครับ

An article by บริษัท เก้ายอดสตูดิโอ จำกัด

Comments Off

วันนี้จะมาแนะนำการใช้งาน Function .prev() กันครับซึ่งอยู่ในหมวดหรือกลุ่มคำสั่ง Tree Traversal ครับ ถ้าให้อธิบายง่ายๆก็คือการ select ค่าของ Element อะไรก็ตามที่อยู่ถนัดไป หรือ หลัง Element ที่เราได้ select ไว้แล้ว ประโยชน์ส่วนใหญ่ก็จะเอาไปใช้กับ Tag พวก li ครับ

มาดูตัวอย่าง code กันเลยละกัน จากตัวอย่างนี้นะครับผม ได้ select element input ที่มี type เป็นชนิด checkbox โดยกำหนด Event Mouse Click ให้กับมันไปด้วย คือเมื่อไรก็ตามที่มีการ click ที่ ckechbox นี้และมีสถานะถูก checked แล้ว ก็จะทำคำสั่งในบรรทัดต่อไป ซึ่งก็คือการเรียกใช้ Function .prev ของ jQuery นั้นเอง

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div>
<input type="text" name="myText" id="textBox" value="Hello jQuery!!" />
<input type="checkbox" id="checkBox" />
</div>

<script>
$(document).ready( function(){
$(" div input[type=checkbox] ").click(
function(){
if( $(this).is(':checked') ) {
$(this).prev().attr('value','Say hi jQuery');
}
}
);
});
</script>

จาก code ก็จะเห็นได้ว่าเราจะมี input box ที่เป็น text box อยู่ด้านบนตัว checkbox นะครับดังนั้นถ้าเราจะทำการ select มันก็ใช้คำสั่ง .prev ได้เลย เราก็จะได้ object ของมันมาและกำหนดรายละเอียดต่างๆได้

หวังว่าบทความนี้จะมีประโยชน์ไม่มากก็น้อยนะครับ สำหรับนำไปประยุคใช้กับงานต่างๆ