如何檢查jQuery插件中是否存在元素？

Question

我的問題很容易解釋-我正在編寫一個jQuery插件，其中用戶指定了一個選擇器。 我需要檢查該選擇器是否存在，如果存在，請執行一些代碼。 但是，我不知道如何在我的jQuery插件中進行檢查。

我需要這樣做，因為我試圖創建類似於Turbolinks的jquery-readyselector（ https://github.com/Verba/jquery-readyselector ）之類的東西。

我希望能夠使用如下功能：

$("#mySelector").pageReady(function() {
    // This is only triggered if #mySelector exists.
    console.log('test')
});

這是我的嘗試：

(function($) {
  $.fn.pageReady = function(fn) {
    var that = this;
    $(document).on('ready page:load', function() {
      if (that.length <= 0){
        return
      } else {
        fn();
      }
    });
  } 
})(jQuery);

問題是即使元素存在，that.length == 0。

我也嘗試在'ready page：load'里面定義函數，但是我得到pageReady不是一個函數：

$(document).on('ready page:load', function() {
  $.fn.pageReady = function(fn) {
    if (this.length <= 0) {
      return
    } else {
      fn();
    }
  }
});

請注意，我正在使用帶有Rails的Turbolinks，這就是為什么我擁有$(document).on('ready page:load' ...) 。 用$(document).ready(...)替換該行將在非Rails / Turbolinks應用程序中執行相同的操作。

Answer 1

我遇到了同樣的問題，這完全是個謎，即使頁面上的id的長度也可能為零。 我檢查了源代碼，並且id在那里！ 原來我在測試

$('mySelector').length > 1

而不是

$('#mySelector').length > 1

即我省略了# 。 我知道上面的問題沒有這個錯誤，但是我注意到BenG在一個片段工具中測試了這個問題並且它起作用了，所以也許原始代碼中沒有了# 。 無論如何，我想其他人也會犯同樣的錯誤，所以這個答案對他們應該是有用的。

Answer 2

$('#selectorId').length > 0

要么

$('.selector').length > 0