使用 jQuery 檢查元素是否存在

Sheeraz Gul 2023年1月30日 2022年7月18日
  1. 使用 jQuery 使用 Length 屬性檢查元素是否存在
  2. 使用 jQuery 建立一個使用者定義的函式來檢查元素是否存在
使用 jQuery 檢查元素是否存在

有兩種方法可以使用 jQuery 來檢查元素是否存在,一種是 length 屬性,另一種是使用方法來建立我們自己的 exist() 方法。本教程演示如何檢查元素是否存在。

使用 jQuery 使用 Length 屬性檢查元素是否存在

jQuery 的 length 屬性可用於檢查元素是否存在;它返回總匹配元素。如果 length 返回 0,則元素不存在,其他任何值表示元素存在。

length 屬性的語法是:

($("element").length)

上面的語法將返回 0 或任何其他數字。

讓我們嘗試一個示例,通過使用 length 屬性來檢查元素是否存在。參見示例:

<!DOCTYPE html>
<html>
<head>
    <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
    <title>jQuery Length</title>
    <style>
    body {
        text-align: center;
    }
    h1 {
        color: lightblue;
        font-size: 4.5rem;
    }
    button {
        cursor: pointer;
        margin-top: 4rem;
    }
    </style>
</head>
<body>
    <h1>Delftstack | The Best Tutorial Site</h1>
    <p id="DemoPara1">This is paragraph 1</p>
    <button id="DemoButton1"> Check Paragraph 1</button>
    <button id="DemoButton2"> Check Paragraph 2 </button>
    <button id="DemoButton3"> Check Heading 1 </button>
    <script type="text/javascript">
    $(document).ready(function () {
        $("#DemoButton1").click(function () {
        if ($("#DemoPara1").length) {
            alert("Paragraph 1 exists");
        }
        else {
        alert("Paragraph 1 does not exist");
        }
        });

        $("#DemoButton2").click(function () {
        if ($("#DemoPara2").length) {
            alert("Paragraph 2 exists");
        }
        else {
            alert("Paragraph 2 does not exist");
        }
        });
        $("#DemoButton3").click(function () {
        if ($("h1").length) {
            alert("Heading 1 exists");
        }
        else {
            alert("Heading 1 does not exist");
        }
        });
    });
    </script>
</body>
</html>

上面的程式碼將通過按下不同的按鈕來檢查段落和標題是否存在。見輸出:

jQuery 如果元素存在長度

使用 jQuery 建立一個使用者定義的函式來檢查元素是否存在

現在,讓我們嘗試建立自己的方法來檢查元素在 jQuery 中是否存在。存在建立函式的語法是:

jQuery.fn.exists = function () {
          return this.length > 0;
};

如你所見,我們使用 length 屬性通過 jQuery 建立了我們自己的 exists 函式。length 屬性用於返回元素的長度,而不是檢查它們的存在;這就是為什麼我們可以建立自己的方法一次並在任何地方使用它。

參見示例:

<!DOCTYPE html>
<html>
<head>
    <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
    <title>jQuery Exists</title>
    <style>
    body {
        text-align: center;
    }
    h1 {
        color: lightblue;
        font-size: 4.5rem;
    }
    button {
        cursor: pointer;
        margin-top: 4rem;
    }
    </style>
</head>
<body>
    <h1>Delftstack | The Best Tutorial Site</h1>
    <p id="DemoPara1">This is paragraph 1</p>
    <button id="DemoButton1"> Check Paragraph 1</button>
    <button id="DemoButton2"> Check Paragraph 2 </button>
    <button id="DemoButton3"> Check Heading 1 </button>
    <script type="text/javascript">
    $(document).ready(function () {
        jQuery.fn.exists = function () {
          return this.length > 0;
        };

        $("#DemoButton1").click(function () {
        if ($("#DemoPara1").exists()) {
            alert("Paragraph 1 exists");
        }
        else {
        alert("Paragraph 1 does not exist");
        }
        });

        $("#DemoButton2").click(function () {
        if ($("#DemoPara2").exists()) {
            alert("Paragraph 2 exists");
        }
        else {
            alert("Paragraph 2 does not exist");
        }
        });
        $("#DemoButton3").click(function () {
        if ($("h1").exists()) {
            alert("Heading 1 exists");
        }
        else {
            alert("Heading 1 does not exist");
        }
        });
    });
    </script>
</body>
</html>

上面的程式碼使用使用者定義的函式 exists 來檢查元素是否存在。輸出將類似於示例一。

見輸出:

jQuery If Element Exists 函式

Author: Sheeraz Gul
Sheeraz Gul avatar Sheeraz Gul avatar

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook

相關文章 - jQuery Element