javascript - 检查页面上是否存在某个元素，如果存在则执行一个函数，如果不存在则不执行任何操作

Question

场景如下:我有 2 组导航，主导航和辅助导航。主导航将始终存在于页面上，而辅助导航不会始终存在。在包含辅助导航的页面上，我希望仅当“affix”类已附加到辅助导航时(在页面向下滚动到某个点之后，但这是一段单独的代码)。

我目前的代码如下:

var navItem = $('.main-navigation');
var stickyNav = $('.tabbed-sticky-nav.affix');

if (stickyNav == null || stickyNav == 'undefined') {
    doNothing();
    return;
} else {
    navItem.mouseenter(function() {
        console.log("Hover");
    });
    navItem.mouseleave(function() {
        console.log("Out");
    });
}

function doNothing() {
    console.log("Object not found");
}

当我按原样运行此代码时，无论子导航项是否在页面上，导航项始终会触发代码。我可能应该首先检查页面上是否存在 .tabbed-sticky-nav ，这样如果页面没有辅助导航，则不必费心检查悬停时的任何内容。但是，如果 .tabbed-sticky-nav 确实存在并且添加了“affix”类，那么我才希望主导航的悬停操作可能适用。我怎样才能改变事情，以便针对这些情况干净地检查和执行？

Answer 1

jQuery 总是返回一些东西，所以检查元素是否存在的方法是使用 length property 。这将告诉您给定选择器返回了多少个元素。

if (!stickyNav.length){
    ...
}