jQuery和选择器：如何确保确实存在我要查找的元素？

Question

我不是经验丰富的JavaScript开发人员（不过，我对Ruby的了解很多），到目前为止，当我必须实现一些JS行时，似乎足以使用jQuery并一起破解了。

据我了解jQuery的，它不承担HTML元素真的存在，但它只是执行查询时，如果有一个匹配的元素（或多个），有些东西是用它做。 这对于通用代码可能效果很好，该通用代码可能想要对页面上的某些元素（可能存在或不存在）应用某些操作，但是当涉及到特定逻辑时，这是一个问题。

这是什么意思？ 让我举个例子吧。

假设我有一个页面和一个HTML元素（ID为“ #my_element”）。 对于此页面，我必须运行一些JS代码，并且必须确保它找到了此元素并对其执行所需的操作。

使用jQuery进行此操作，我只需要执行类似$('#my_element').addTooltip() ，该操作首先看起来不错：当我将鼠标悬停在元素上时，会显示一个工具提示。

假设几个月后我已经完全忘记了这个JS脚本，并且将元素的ID更改为其他名称。 怎么了？ 没有。 直到偶然发现它时，我才会注意到缺少工具提示的问题。

因此，我想知道如何确保真正应用了我的JS，这意味着：找到了所需的元素，对它们进行了处理，等等。

jQuery的哲学是“错误”的工具吗？ 我需要另一个框架吗？ 也许是更复杂的模式，例如MVC？ 我以前玩过KnockoutJS，似乎这样做可能更好，因为它使用data-bind属性直接绑定到元素，因此它比jQuery更适合代码。

Answer 1

提到的注释总是在对返回的结果执行操作之前检查.length属性（这可能是最好的答案），但是在实际语法错误的情况下，“什么都没有发生”的陈述并不总是正确的。

如果您在其他浏览器中使用Chrome开发人员工具或类似工具（Firebug等），则应在“控制台”中看到错误

您也可以打开javascript调试以获取更多信息。 当您在null值（jQuery集合）上调用“ addTooltip（）”时，您会在控制台中看到错误弹出窗口，并且可能在调试器中得到异常。

这是在客户端javascript中查找错误的最简单方法之一。

Answer 2

您可以添加特定的插件来验证是否存在非零长度的集合，并在链中使用它：

(function ($) {
  $.fn.verify = function() {
    if (this.length) {
      return this;
    }
    else {
      console.log("No elements found with supplied selector.")
    }
  }
})(jQuery);

$("#myElement").verify().addTooltip();

当然，这确实依赖于手动应用的verify()插件，据我所知，jQuery没有内置错误报告功能来自动启用无效选择器的记录，或者报告返回零元素的选择器。