许多用户对如何使用 jQuery 检查 HTML DOM 中是否存在元素存在疑问。简而言之，如何以最简单的方式检查页面上是否存在元素？
我们可以使用多种方法来实现此结果。其中之一是检查元素选择器的“length”属性是否返回大于 0 的数字。
例如，如果我们有类似于下图所示的 HTML。
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Lorem ipsum dolor</title>
5 <meta charset="utf-8">
6</head>
7<body>
8 <div id="myDiv">Lorem ipsum dolor sit amet.</div>
9</body>
10</html>
我们要检查 DOM 中是否存在元素“myDiv”，即在页面上，我们可以使用以下代码。
1if ($("#myDiv").length > 0) {
2 console.log("The element exists!");
3}
简化代码
由于 JavaScript 中的许多事情要么是真要么是假，因此“length”属性的返回也可以被认为是真或假。返回是一个数字，0 代表“假”，其他都代表“真”。
所以我们可以将代码简化如下。
1if ($("#myDiv").length) {
2 console.log("The element exists!");
3}
即使删除比较“> 0”，返回值保持不变。
为 jQuery 创建一个“exists”函数
我们可以更进一步，添加一个名为“exists”的函数。这个函数可以直接与我们要检查的元素一起使用。
1jQuery.fn.exists = function() {
2 return ( $(this).length > 0);
3}
4
5var elementExists = $("#myDiv").exists();
6
7console.log(elementExists);
我们可以进一步改进并防止该方法代表链接的可能性。在这种情况下这是不可能的。我们将按如下方式进行。
1jQuery.exists = function(selector) {
2 return ( $(selector).length > 0 );
3}
4
5if ( $.exists("#myDiv") ) {
6 console.log("The element exists!");
7}
请注意，现在我们将选择器作为参数传递给“exists”函数，而不是直接从对象模拟链。
使用数组检查 HTML 元素是否存在
当我们在 jQuery 中使用选择器时，它会返回一个元素数组。如果我们尝试访问该数组的第一个元素并返回“未定义”，则表明该元素在 DOM 中不存在。
1if ( $('#myDiv')[0] ) {
2 console.log("The element exists!");
3}
如您所见，有几种方法可以检查页面上是否存在 HTML 元素。哪个最好？嗯，解决你问题的那个。重要的是您的代码正在运行和工作。