如何使用 jQuery 統計文件中包括頭部和主體在內的所有元素?


概述

要統計 HTML 文件中每個元素,包括 head 標籤和 body 標籤,可以使用 jQuery 的 "length()" 方法。透過選擇通用選擇器(*)作為選擇器,並使用 length 屬性計算其長度,將返回 HTML 文件頁面中包含的元素數量。

語法

用於統計元素數量的語法如下:

$(“*”).property;
  • 選擇器 - 此處使用的選擇器是通用選擇器,顧名思義,它選擇頁面上的每個元素。

  • 屬性 - 此解決方案中使用的選擇器是 “length()” 屬性。length 屬性返回文件中存在的元素數量。

演算法

  • 步驟 1 - 建立一個簡單的 HTML 頁面,將 jQuery 內容分發網路 (CDN) 新增到 HTML 文件的頭部。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
  • 步驟 2 - 新增一個 span 元素,用於顯示輸出。

  • 步驟 3 - 使用 jQuery 語法建立點選事件,並選擇按鈕元素以觸發點選函式。

$('button').click(() => {
})
  • 步驟 4 - 現在選擇通用選擇器(*)作為選擇器,並使用 length() 屬性獲取元素的數量。將其放在 text() 屬性內作為 span 元素選擇器。“text()” 屬性在 jQuery 中用作 JavaScript 中的 innerText(),它將文字插入選定的元素中。

$('span').text($('*').length);
  • 步驟 5 - 當單擊按鈕時,click() 事件內的操作被觸發。然後它將在瀏覽器螢幕上返回 HTML 文件中存在的元素數量。

示例

在此示例中,HTML 頁面包含某些元素。當單擊 HTML 按鈕時,內部選擇器及其屬性被觸發。因此,在 <span> 元素中將顯示包括頭部和主體在內的總元素長度。

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <title> Count number of elements including head body jQuery </title>
</head>
   <body>
      <h2> Total Number of elements = <span> </span> </h2>
      <button> Count Elements </button>
      <script>
         $('button').click(() => {
            $('span').text($('*').length);
         })
      </script>
   </body>
</html>

以上示例包含以下某些元素:html、head、script、title、body、h2、span、button、script。如您所見,HTML 文件中總共有 9 個元素,因此 text() 屬性將在 HTML span 元素中設定輸出。

結論

因此,以上統計元素數量的解決方案在修復頁面上未呈現的元素方面非常有用,因為我們可以為此設定一個計數器,所以在將頁面載入到瀏覽器後,如果計數小於元素,則可以檢查該計數並輕鬆修復它們。length 屬性返回 Number 型別的值。在許多問題中,length 屬性用於獲取特定元素的大小。

更新於: 2023年3月24日

1K+ 次檢視

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告

© . All rights reserved.