jQuery 如何检查一个元素的存在与否

概述

我们可以使用jQuery检查一个HTML元素，如

，等，它们是否存在于HTML页面中。为了实现这个解决方案，我们有jQuery的 “length “属性，它可以检查HTML文档中的特定元素，并返回特定元素的长度，也就是该元素在HTML正文中出现的次数。length属性存在于jQuery（$）的主库中。

语法

本程序中使用的语法是 −

$(elementName).length;

elementName – elementName可以是任何标签、类名、id名，用来建立网页的结构。如<p>, <label>, <input>, <h1>, <h2>, <h3>, <span>等。
length -length 是jQuery对象的一个属性，用于检查HTML中元素的出现情况。

算法

第1步 - 在HTML主体中创建一些元素，如p，span，标签等，并在HTML的头部标签中添加一个CDN链接。
第2步 – 使用jQuery语法，选择按钮作为选择器并执行click()事件方法。
第 3步 – 使用$(selectors)从HTML中选择一些元素，并使用length方法检查这些元素的长度。将这些元素的长度存储在不同的变量中。
第4步 – 在屏幕上显示输出。如果length方法返回的值大于0，那么该元素就存在，否则如果它返回的值等于0，那么该元素就不存在。

例子

在这个例子中，我们要搜索某些元素，如

, class “para”, , 。当我们点击 “检查元素 “按钮时，它启动了jQuery函数，其中包含$(element).length属性。特定元素的返回被存储在其特定的变量中。之后，text()属性被调用，在网页上插入文字。这个例子的结果可以在下面的图片中看到。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Element exist or not using jQuery</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
   <style>
      body {
         color: white;
         background-color: #0a0a0a;
         display: flex;
         place-content: center;
         min-height: 90vh;
         flex-direction: column;
         text-align: center;
      }
      p {
         width: 50%;
         margin: 8px auto;
         padding: 0.4rem;
      }
      button {
         border: none;
         width: 8rem;
         padding: 0.4rem;
         background-color: #0a0a0a;
         box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.788);
         border-radius: 5px;
         margin: 8px auto;
         color: white;
      }
   </style>
</head>
   <body>
      <p></p>
      <p></p>
      <p></p>
      <span></span><span></span>

      <h1>Check the element by clicking button</h1>

      <!-- This <button> tag will trigger the jQuery arrow function -->
      <button>Check Element</button>

   <!-- Output of the length will shown here -->
      <p id="output" style="text-align:start;background-color: green; width: 8rem;">
         1) p: <span id="pl"></span><br />
         2) para(class): <span id="pal"></span><br />
         3) label: <span id="ll"></span><br />
         4) span: <span id="sl"></span><br />
      </p>

      <script>
         // The jQuery function start from here
         ("button").click(() => {
            var pel =("p").length;
            var pael = (document.getElementsByClassName("para")).length;
            var lel =("label").length;
            var sel = ("span").length;(document.getElementById("pl")).text(pel);
            (document.getElementById("ll")).text(lel);(document.getElementById("sl")).text(sel);
         })
      </script>
   </body>
</html>

输出显示了HTML中的现有元素。在下面的输出中，上述代码包含4个

标签，2个带有 “para “类名称的<p class="para">标签，在jQuery函数中，它还检查了<label>标签，但HTML代码中不包含任何类型的该标签，所以它返回了0，它包含6个<span>标签。

结论

length属性的返回类型是 “数字”。当该元素存在于HTML结构中时，它会返回大于’0’的数字。如果该元素不存在于HTML元素中，那么它返回0或null。length属性按照层次顺序找到元素，并返回所有存在于HTML中的特定标签的总数。jQuery中的length属性与JavaScript中的不同，因为在JavaScript中，length方法返回数组的大小，而在jQuery中则返回HTML中存在的元素数量。jQuery的选择器选择HTML元素，并允许进一步的操作。各种jQuery选择器是 “*”，它选择HTML中的所有元素，”#id “选择具有特定id名称的元素，”.className “是用来选择特定的元素。