Jun
6
2010

prevUntil, nextUntil, parentsUntil

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

มาถึง new feature ที่ 2 ของ jQuery 1.4 กันครับ อันนี้เป็นอีกความสามารถใหม่ใน version 1.4 นี้ครับ มาพูดถึงว่ามันทำงานกันเลยดีกว่าครับ prevUntil, nextUntil, parentsUntil นี้การทำงานของมันจะเป็นลักษณะการค้นหา Elements ที่เราต้องการแต่เราสามารถระบุตำแหน่งที่ต้องการและทำแหน่งสิ้นสุดได้ครับ ดูได้จากตัวอย่างด้านล่างนี้ครับ

1
2
3
4
5
6
7
8

<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grape</li>
<li>Strawberry</li>
<li>Pear</li>
<li>Peach</li>
</ul>

จาก code ตัวอย่างด้านบนนี้ถ้าเราต้องการจะ เลือกเอาเฉพาะ element li ที่มีข้อความ Banana, Grape, Strawberry เพื่อที่จะกำหนดค่าให้เฉพาะที่เราเลือกนั้น เราสามารถที่จะใช้ความสามารถใหม่ของ jQuery 1.4 นี้ได้ดังตัวอย่าง code ด้านล่างนี้ครับ

1
2
3

jQuery('ul li:contains(Apple)')
.nextUntil(':contains(Pear)');
// Selects Banana, Grape, Strawberry

จาก code นี้เป็นการ select ค่าที่อยู่ระหว่าง Apple กับ Pear ดังนั้นค่าที่อยู่ระหว่างนี้เราสามารถที่จะกำหนดค่าให้กับมันได้ครับ เช่นใส่สี หรือกำหนดค่าอื่นๆได้ เช่น

1
2
3

jQuery('ul li:contains(Apple)')
.nextUntil(':contains(Pear)')
.css('background-color', 'red');

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