如何用jQuery和JavaScript准确判断元素存在？Ruby on Rails场景遇阻

我明白你遇到的困扰了——在Rails里通过body的控制器/动作类来区分页面，却没法正确触发对应的JS逻辑。先给你直接上能正常工作的写法，再逐个分析你之前代码的问题所在。

正确的实现方式 #

首先，一定要确保你的代码在DOM加载完成后执行，否则可能因为body元素还没渲染导致选择器失效。然后用以下两种方式判断：

方式1：检查jQuery选择器的length属性 #

$(function() {
  // 判断是否是home控制器的页面
  if ($('body.home').length > 0) {
    console.log('Right page');
  } else {
    console.log('Wrong page');
  }

  // 更精准：判断是home控制器的about动作页面
  if ($('body.home.about').length) {
    console.log('Home#about page');
  }
});

方式2：使用hasClass方法 #

这种方式可读性更强，尤其需要同时判断多个类的时候：

$(function() {
  const $body = $('body');
  
  if ($body.hasClass('home')) {
    console.log('Home controller page');
  }

  if ($body.hasClass('home') && $body.hasClass('about')) {
    console.log('Home#about page');
  }
});

你之前写法的问题分析 #

咱们逐个看你踩的坑：

1. 写法1：if (page)永远为true

   var page = $('body.home')
   if (page) { ... }
   

   jQuery的选择器不管有没有匹配到元素，都会返回一个jQuery对象，而对象在JS里是“真值”（truthy），所以if(page)永远会进入true分支，哪怕没有匹配到任何元素。

2. 写法2：if (page)的结果取决于是否匹配到元素，但你说始终返回true？

   var page = $('body.home')[0]
   if (page) { ... }
   

   $('body.home')[0]会返回匹配到的第一个DOM元素，如果没有匹配到则返回undefined（假值）。你说始终返回true，大概率是测试时页面确实包含home类，或者你写错了选择器（比如代码注释里的body.information和实际页面类不匹配）。

3. 写法3：if ($(page))永远为true

   var page = $('body.home')[0]
   if ($(page)) { ... }
   

   哪怕page是undefined，$(undefined)也会返回一个空的jQuery对象，而空对象依然是真值，所以这个判断永远为true。

4. 写法4：在正确页面返回false

   var page = $('body.home')[0]
   if ($(page).length > 0) { ... }
   

   这里的问题是：如果page是DOM元素，$(page)会返回包含该元素的jQuery对象，length应该是1；但如果你的代码在DOM没加载完成就执行了，$('body.home')[0]会是undefined，此时$(undefined)的length是0，就会进入false分支。另外也可能是选择器拼写错误，比如把home写成了其他类名。

内容的提问来源于stack exchange，提问作者PrimeTimeTran