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沒有內置錯誤報告功能來自動啟用無效選擇器的記錄，或者報告返回零元素的選擇器。