Làm cách nào để phát hiện nếu bộ chọn trả về null?

Cách tốt nhất để phát hiện nếu bộ chọn jQuery trả về một đối tượng trống. Nếu bạn làm:

alert($('#notAnElement'));

bạn nhận được [Object Object], vì vậy cách tôi làm bây giờ là:

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

sẽ viết "không xác định" và vì vậy bạn có thể kiểm tra xem. Nhưng có vẻ rất tệ. Có cách nào khác không?

Yêu thích của tôi là mở rộng jQuery với sự tiện lợi nhỏ bé này:

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

Được sử dụng như:

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

Rõ ràng hơn là sử dụng chiều dài.

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

Bộ chọn trả về một mảng các đối tượng jQuery. Nếu không tìm thấy phần tử phù hợp, nó sẽ trả về một mảng trống. Bạn có thể kiểm tra .lengthbộ sưu tập được bộ chọn trả về hoặc kiểm tra xem phần tử mảng đầu tiên có 'không xác định' hay không.

Bạn có thể sử dụng bất kỳ ví dụ nào sau đây trong câu lệnh IF và tất cả chúng đều tạo ra cùng một kết quả. Đúng, nếu bộ chọn tìm thấy một phần tử phù hợp, thì ngược lại.

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

Tôi thích làm một cái gì đó như thế này:

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

Vì vậy, sau đó bạn có thể làm một cái gì đó như thế này:

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/

Tôi thích sử dụng presence, lấy cảm hứng từ Ruby on Rails :

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

Ví dụ của bạn trở thành:

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

Tôi thấy nó vượt trội so với đề xuất $.fn.existsbởi vì bạn vẫn có thể sử dụng các toán tử boolean hoặc if, nhưng kết quả trung thực là hữu ích hơn. Một vi dụ khac:

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

Sở thích của tôi và tôi không biết tại sao điều này chưa có trong jQuery:

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

Được sử dụng như thế này:

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

Hoặc, như trong CoffeeScript:

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

Đây là trong tài liệu JQuery:

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

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

Bạn có thể muốn làm điều này mọi lúc theo mặc định. Tôi đã vật lộn để bọc hàm jquery hoặc phương thức jquery.fn.init để làm điều này mà không gặp lỗi, nhưng bạn có thể thực hiện một thay đổi đơn giản cho nguồn jquery để làm điều này. Bao gồm một số dòng xung quanh bạn có thể tìm kiếm. Tôi khuyên bạn nên tìm kiếm nguồn jquery choThe 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 = {

Cuối cùng nhưng không kém phần quan trọng, bạn có thể lấy mã nguồn jquery không nén tại đây: http://code.jquery.com/