ในการสร้างเว็บไซต์หนึ่งเพื่อจัดการข้อมูลนั้น มีเครื่องมื่อมากมายให้ได้ทดลองใช้กัน หนึ่งในนั้นคือ Jquery ซึ่งเป็น JavaScript labrary หนึ่งที่ได้รับความนิยมอย่างมากในปัจจุบัน สำหรับบทความนี้จะอธฺบายถึงการใช้งานเมธอด slice() ของjquery
slice() เป็น เมทธอดที่ inbuilt ใน jQuery ซึ่งใช้ในการเลือกชุดย่อยขององค์ประกอบที่อยู่บนพื้นฐานของ index ชุดย่อยเป็นชุดที่อาจเป็นส่วนหนึ่งของชุดใหญ่
$(selector).slice(para1, para2)พารามิเตอร์:มันยอมรับสองพารามิเตอร์ซึ่งระบุไว้ด้านล่าง -
- para1 : เพื่อระบุว่าจะเริ่มการเลือกองค์ประกอบได้ตำแหน่งที่เท่าไหร่
- para2 : เป็นทางเลือก(ไม่จำเป็น)และจะระบุตำแหน่งที่จะหยุดการเลือกองค์ประกอบ
ตัวอย่างโค้ดดังนี้
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
$(document).ready(function() {
$("p").slice(1, 4).css("background-color", "lightgreen");
});
</script>
<style>
body {
width: 500px;
height: 200px;
padding: 20px;
border: 2px solid green;
}
</style>
</head>
<body>
<h1>Welcome to Mindphp !</h1>
<p>This is at index 0.</p>
<p>This is at index 1.</p>
<p>This is at index 2.</p>
<p>Tnhis is at index 3.</p>
</body>
</html>
ผลลัพธ์เมื่อเปิดผ่านเบราเซอร์
จากคำสั่ง $("p").slice(1, 4).css("background-color", "lightgreen"); ซึ่งเป็นการกำหนดให้เลือก teg p ตั้งแต่ตำปหน่งที่ 1 ถึง 4 ซึ่งใน index จะนับตั้งแต่ 0 นั้นเท่ากับว่า index 1 คือตัวที่สอง และกำหนด CSS โดย background ให้เป็นสีเขียนดังผลลัพธ์ที่เห็น
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery
