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

My question is pretty self explanatory - I'm writing a jQuery plugin where the user specifies a selector. I need to check if that selector exists, and if so, execute some code. However, I can't figure out how to do that check inside of my jQuery plugin.

我的问题非常自我解释 - 我正在编写一个jQuery插件,用户指定一个选择器。我需要检查该选择器是否存在,如果存在,则执行一些代码。但是,我无法弄清楚如何在我的jQuery插件中进行检查。

I need to do this because I'm trying to create something like jquery-readyselector (https://github.com/Verba/jquery-readyselector) that works with Turbolinks.

我需要这样做,因为我正在尝试创建类似于与Turbolinks一起使用的jquery-readyselector(https://github.com/Verba/jquery-readyselector)。

I want to be able to use the function like so:

我希望能够像这样使用这个功能:

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

Here's my attempt:

这是我的尝试:

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

The issue with this is that that.length == 0, even if the element exists.

这个问题是that.length == 0,即使元素存在。

I also tried defining the function inside a 'ready page:load' but I get pageReady is not a function:

我也尝试在'ready page:load'中定义函数但是我得到pageReady不是函数:

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

Note that I'm using Turbolinks with Rails, and that's why I have that $(document).on('ready page:load' ...). Replacing that line with $(document).ready(...) would do the same thing in a non-Rails/Turbolinks app.

请注意,我正在使用Turbolinks和Rails,这就是为什么我有$(document).on('ready page:load'...)。用$(document).ready(...)替换该行会在非Rails / Turbolinks应用程序中执行相同的操作。

2 个解决方案

#1

I had the same problem and was absolutely mystified that the length of the id could be zero even it was on the page. I checked the source code and the id was there! It turned out that I was testing

我有同样的问题,并且绝对神秘的是id的长度即使在页面上也可能为零。我检查了源代码,id就在那里!原来我正在测试

$('mySelector').length > 1

rather than

$('#mySelector').length > 1

i.e. I left out the #. I know that the above question does not have this mistake, but I note that the BenG tested question in a snippet tool and it worked, so maybe the original code had left out the #. In any case, I imagine that other people will make this same mistake, so this answer should be useful for them.

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

#2

$('#selectorId').length > 0

or

$('.selector').length > 0