ฉันจะตรวจสอบได้อย่างไรว่าตัวเลือกคืนค่าเป็นศูนย์หรือไม่

เป็นวิธีที่ดีที่สุดในการตรวจสอบว่า jQuery-selector ส่งกลับวัตถุว่างเปล่า ถ้าคุณทำ:

alert($('#notAnElement'));

คุณได้รับ [วัตถุวัตถุ] ดังนั้นวิธีที่ฉันทำตอนนี้คือ:

alert($('#notAnElement').get(0));

ซึ่งจะเขียน "undefined" และคุณสามารถตรวจสอบได้ แต่มันดูแย่มาก มีวิธีอื่นอีกไหม?

สิ่งที่ฉันชอบคือการขยาย jQuery ด้วยความสะดวกสบายเล็ก ๆ นี้:

$.fn.exists = function () {
    return this.length !== 0;
}

ใช้เหมือน:

$("#notAnElement").exists();

ชัดเจนกว่าการใช้ความยาว

if ( $("#anid").length ) {
  alert("element(s) found")
} 
else {
  alert("nothing found")
}

ตัวเลือกส่งคืนอาร์เรย์ของวัตถุ jQuery หากไม่พบองค์ประกอบที่ตรงกันมันจะส่งคืนอาร์เรย์ว่าง คุณสามารถตรวจสอบ.lengthคอลเลกชันที่ส่งคืนโดยตัวเลือกหรือตรวจสอบว่าองค์ประกอบอาร์เรย์แรกเป็น 'ไม่ได้กำหนด'

คุณสามารถใช้ใด ๆตัวอย่างต่อไปนี้ภายในคำสั่ง IF และพวกเขาทั้งหมดผลผลิตผลเดียวกัน จริงถ้าตัวเลือกพบองค์ประกอบที่ตรงกัน, เท็จเป็นอย่างอื่น

$('#notAnElement').length > 0
$('#notAnElement').get(0) !== undefined
$('#notAnElement')[0] !== undefined

ฉันชอบทำสิ่งนี้:

$.fn.exists = function(){
    return this.length > 0 ? this : false;
}

ดังนั้นคุณสามารถทำสิ่งนี้:

var firstExistingElement = 
    $('#iDontExist').exists() ||      //<-returns false;
    $('#iExist').exists() ||          //<-gets assigned to the variable 
    $('#iExistAsWell').exists();      //<-never runs

firstExistingElement.doSomething();   //<-executes on #iExist

http://jsfiddle.net/vhbSG/

ฉันชอบที่จะใช้presenceแรงบันดาลใจจากRuby on Rails :

$.fn.presence = function () {
    return this.length !== 0 && this;
}

ตัวอย่างของคุณจะกลายเป็น:

alert($('#notAnElement').presence() || "No object found");

ฉันคิดว่ามันเหนือกว่าข้อเสนอ$.fn.existsเพราะคุณยังสามารถใช้โอเปอเรเตอร์บูลีนifได้ แต่ผลลัพธ์ที่เป็นความจริงนั้นมีประโยชน์มากกว่า ตัวอย่างอื่น:

$ul = $elem.find('ul').presence() || $('<ul class="foo">').appendTo($elem)
$ul.append('...')

การตั้งค่าของฉันและฉันไม่รู้ว่าทำไมสิ่งนี้ไม่ได้อยู่ใน jQuery:

$.fn.orElse = function(elseFunction) {
  if (!this.length) {
    elseFunction();
  }
};

ใช้แบบนี้:

$('#notAnElement').each(function () {
  alert("Wrong, it is an element")
}).orElse(function() {
  alert("Yup, it's not an element")
});

หรือตามที่ปรากฏใน CoffeeScript:

$('#notAnElement').each ->
  alert "Wrong, it is an element"; return
.orElse ->
  alert "Yup, it's not an element"

นี่คือในเอกสารประกอบ JQuery:

http://learn.jquery.com/using-jquery-core/faq/how-do-i-test-whether-an-element-exists/

  alert( $( "#notAnElement" ).length ? 'Not null' : 'Null' );

คุณอาจต้องการทำสิ่งนี้ตลอดเวลาโดยค่าเริ่มต้น ฉันพยายามที่จะห่อฟังก์ชั่น jquery หรือวิธี jquery.fn.init ให้ทำโดยไม่มีข้อผิดพลาด แต่คุณสามารถทำการเปลี่ยนแปลงอย่างง่าย ๆ กับแหล่ง jquery เพื่อทำสิ่งนี้ รวมแล้วคือเส้นรอบ ๆ ที่คุณสามารถค้นหาได้ ฉันแนะนำให้ค้นหาแหล่งข้อมูล jquery สำหรับThe jQuery object is actually just the init constructor 'enhanced'

var
  version = "3.3.1",

  // Define a local copy of jQuery
  jQuery = function( selector, context ) {

    // The jQuery object is actually just the init constructor 'enhanced'
    // Need init if jQuery is called (just allow error to be thrown if not included)
    var result = new jQuery.fn.init( selector, context );
    if ( result.length === 0 ) {
      if (window.console && console.warn && context !== 'failsafe') {
        if (selector != null) {
          console.warn(
            new Error('$(\''+selector+'\') selected nothing. Do $(sel, "failsafe") to silence warning. Context:'+context)
          );
        }
      }
    }
    return result;
  },

  // Support: Android <=4.0 only
  // Make sure we trim BOM and NBSP
  rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;

jQuery.fn = jQuery.prototype = {

สุดท้าย แต่ไม่ท้ายสุดคุณสามารถรับซอร์สโค้ด jquery ที่ไม่มีการบีบอัดได้ที่นี่: http://code.jquery.com/