jQuery การเดินทาง - วิธี end()

jQuery คู่มือการเลือกตัวอย่าง

ตัวอย่าง

เลือกทุกย่อง หาสมาชิก span ในย่องนั้น และกลับคืนสมาชิกให้เป็นย่อง และตั้งเส้นทางของย่องเป็นเส้นทางที่มีเส้นตรงและสีแดง 2 พิกเซล

$("p").find("span").end().css("border", "2px red solid");

ลองทดลองด้วยตัวเอง

คำนิยามและการใช้งาน

วิธี end() หยุดการกระทำกรองที่ใช้งานอยู่ของทางด้านล่างของเส้นทางที่ใช้งานอยู่ และกลับคืนสมาชิกที่ตรงกันข้ามกันให้กลับมาเป็นสมาชิกที่เดิม

ภาษาบวก

.end()

รายละเอียด

ส่วนที่ส่งผลมากขึ้นและจะสร้างสิ่งที่ตรงกันข้ามต่อตัวแบบจำลอง jQuery และสร้างตัวแบบจำลองแห่งสมาชิก DOM ที่มีความตรงกันตรงข้ามกัน ในกรณีที่เกิดขึ้นเช่นนี้ ควรจะจัดเก็บสมาชิกที่มีความตรงกันตรงข้ามกันในสต๊ากที่อยู่ในวัตถุ ในทุกครั้งที่มีการเรียกใช้เมธอดกรองเพียงครั้งเดียว จะมีการเพิ่มสมาชิกใหม่เข้าสต๊าก ถ้าเราต้องการสมาชิกเดิม สามารถใช้ end() ในการปลดเพิ่มใหม่ในสต๊ากให้กลับมาเป็นสมาชิกที่เดิม

ตั้งแต่ว่ามีรายการรายการที่อ่อนไหวและแบบเดียวกันในหน้านี้

<ul class="first">
   <li class="foo">list item 1</li>
   <li>list item 2</li>
   <li class="bar">list item 3</li>
</ul>
<ul class="second">
   <li class="foo">list item 1</li>
   <li>list item 2</li>
   <li class="bar">list item 3</li>
</ul>

ตัวอย่าง 1

หลักๆ คือเมื่อใช้ jQuery chain attribute (command chain) มันจะมีประโยชน์มากขึ้น ถ้าไม่ใช้ command chain ทางปกติเราจะเรียกใช้ตัวแปรที่เคยใช้ไปก่อน ดังนั้นเราจะไม่จำเป็นต้องใช้ stack ตามที่มา แต่ผ่านทาง end() เราสามารถใช้มีธงเรียกใช้ทุกคำสั่งด้วยต่อเนื่องกัน

$('ul.first').find('.foo').css('background-color', 'red')
  .end().find('.bar').css('background-color', 'green');

ลองทดลองด้วยตัวเอง

คำสั่งนี้ทำการค้นหาอันดับแรกของลิสต์ที่มีคลาสชื่อ foo และกำหนดสีพื้นหลังเป็นสีแดง คำสั่ง end() จะนำตัวแปรกลับไปที่สถานะก่อนที่จะเรียก find() ดังนั้นคำสั่ง find() ตัวที่สองค้นหา '.bar' ภายใน <ul class="first"> ไม่ใช่ใน <li class="foo"> และกำหนดสีพื้นหลังของอันดับที่สองเป็นสีเขียว ผลสุดท้ายคืออันดับที่ 1 และอันดับที่ 3 ของลิสต์แรกที่มีสีพื้นหลังเป็นสีที่มีสี และอันดับในลิสต์ที่สองไม่มีการเปลี่ยนแปลงใดๆ

ตัวอย่าง 2

jQuery chain นี้สามารถแสดงในรูปแบบโค้ดโครงสร้างได้ ใช้วิธี filter โค้ดโครงสร้างที่กลับซ้าย และใช้วิธี end() ที่ใช้ปิดโค้ดโครงสร้าง

$('ul.first').find('.foo')
  .css('background-color', 'red')
.end().find('.bar')
  .css('background-color', 'green')
.end();

ลองทดลองด้วยตัวเอง

ท้ายที่สุดคำสั่ง end() ไม่จำเป็น เพราะเราจะทิ้ง jQuery object นี้ไปต่อไปอีก อย่างไรก็ตาม ถ้าเขียนโค้ดในรูปแบบนี้ คำสั่ง end() จะให้ความสมดุลในทางฟิสิกส์ และการจัดการโค้ดเป็นรูปแบบที่ดีขึ้น อย่างน้อยสำหรับนักพัฒนา แต่ราคาที่จะจ่ายก็คือการทำการเรียกใช้เพิ่มเติม จึงมีการเสียงามของการเรียกใช้เพิ่มเติมนี้

jQuery คู่มือการเลือกตัวอย่าง