jQuery วนลูป - วิธีการ is()

jQuery ลากเลื่อนคู่มือ

ตัวอย่าง

กลับค่า false เพราะ element input มี parent คือ element p

  var isFormParent = $("input[type='checkbox']").parent();.is("form");
  $("div").text("isFormParent = " + isFormParent);

ลองเทストเอง

การกำหนดและการใช้งาน

is() ตรวจสอบ element หรือ jQuery object ตาม selector หรือ element หรือ jQuery object ว่ามี element ที่ตรงกับค่าที่กำหนดหรือไม่ ถ้ามีอย่างน้อยหนึ่ง element ตรงกับค่าที่กำหนด ก็จะกลับค่า true

การใช้งาน

.is(selector)
ตัวแปร การอธิบาย
selector ค่าของ string ที่มี selector expression ที่ตรงกับ element ที่ต้องการค้นหา

รายละเอียด

ต่างจากวิธีการกรองอื่น คำสั่ง .is() ไม่สร้าง jQuery object ใหม่ และอนุญาตให้เราตรวจสอบ jQuery object โดยไม่เปลี่ยนแปลงเนื้อหาของมัน นี่มักมีประโยชน์ใน callback ภายใน เช่น event handler。

จงเล็งเห็นว่าเรามีรายการที่มีสองโครงการที่มีย่อยอย่างเช่น：

<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>list item 2</span></li>
  <li>list item 3</li>
</ul>

คุณสามารถเพิ่ม event handler ให้กับ element <ul> และจำกัดรหัสเพียงเมื่อรายการที่มีความหมายเด็ดขาดถูกคลิก ไม่ใช่อย่างเด็ดขาดของย่อยอย่างเช่น：

$("ul").click(function(event) {
  var $target = $(event.target);
  if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }
});

ลองเทストเอง

ตอนนี้ เมื่อผู้ใช้คลิกที่คำแปลงเป็น "list" ในรายการแรกหรือคำใดๆ ในรายการที่สาม รายการที่ถูกคลิกจะมีสีพื้นหลังแดง แต่เมื่อผู้ใช้คลิกที่ "item 1" ในรายการแรกหรือคำใดๆ ในรายการที่สอง จะไม่มีการเปลี่ยนแปลงใดๆ เพราะในกรณีนี้ จุดมุ่งหมายของเหตุการณ์คือ <strong> คือ <span>。

โปรดทำให้เข้าใจว่า สำหรับตัวแสดงเลือกตัวเลือกที่มีตำแหน่ง อย่างเช่น :first, :gt() หรือ :even การคัดกรองตำแหน่งนั้นมีขึ้นต่อโจทย์จาก jQuery ที่ถูกส่งมาที่ .is() ไม่ใช่สำหรับเอกสารที่มีอยู่ในบันทึก ดังนั้น สำหรับ HTML ด้านบน ตัวแสดงเช่น $("li:first").is("li:last") จะกลับมาเป็น true แต่ $("li:first-child").is("li:last-child") จะกลับมาเป็น false

ใช้ฟังก์ชัน

วิธีใช้ของอีกอันหนึ่งของการ์นาลนี้คือ การประมวลผลตัวแสดงที่มีความเกี่ยวข้องกับฟังก์ชันแทนที่จะเป็นเลือกตัวเลือกต่าง ๆ สำหรับใช้กับฟังก์ชัน สำหรับแต่ละองค์ประกอบ ถ้าฟังก์ชันหลังทำการประมวลผลแล้วเป็น true ก็จะทำให้ .is() กลับมาเป็น true ด้วย เช่น ใน HTML ชิ้นต่อไปนี้:

<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong> -
    two <span>strong tags</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

คุณสามารถเพิ่มมือชี้แก้ไข click ให้กับแต่ละ <li> เพื่อนับจำนวนองค์ประกอบ <strong> ภายใน <li> ที่ถูกคลิก:

$("li").click(function() {
  var $li = $(this),
    isWithTwo = $li.is(function() {
      return $('strong', this).length === 2;
    });;
  if ( isWithTwo ) {
    $li.css("background-color", "green");
  } แต่ในกรณีที่ไม่เป็นนั้น {
    $li.css("background-color", "red");
  }
});

ลองเทストเอง

jQuery ลากเลื่อนคู่มือ