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

Question

我的问题不言自明——我正在编写一个用户指定选择器的 jQuery 插件。我需要检查该选择器是否存在，如果存在，则执行一些代码。但是，我不知道如何在我的 jQuery 插件中进行检查。

我需要这样做，因为我正在尝试创建类似 jquery-readyselector (https://github.com/Verba/jquery-readyselector) 的东西，它适用于 Turbolinks。

我希望能够像这样使用该功能：

$("#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，即使元素存在。

我还尝试在“就绪页面：加载”中定义函数，但我得到 pageReady 不是函数：

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

请注意，我将 Turbolinks 与 Rails 一起使用，这就是我使用 $(document).on('ready page:load' ...) 的原因。用$(document).ready(...) 替换该行将在非Rails/Turbolinks 应用程序中做同样的事情。

Answer 1

我遇到了同样的问题，并且非常困惑，即使它在页面上，id 的长度也可能为零。我检查了源代码，id在那里！原来我在测试

$('mySelector').length > 1

而不是

$('#mySelector').length > 1

即我省略了#。我知道上面的问题没有这个错误，但我注意到 BenG 在 sn-p 工具中测试了问题并且它有效，所以可能原始代码遗漏了#。无论如何，我想其他人也会犯同样的错误，所以这个答案应该对他们有用。