jQuery :visible 選擇器

jQuery 中的:visible 選擇器用於選擇當前在 DOM 中可見的元素。

以下是一些元素不被視為可見的情況：

CSS 屬性為 display: none 的元素。
CSS 屬性為 visibility: hidden 的元素。
不透明度為 0 的元素。

注意：:visible 選擇器不適用於高度或寬度設定為 0 的元素。

語法

以下是 jQuery 中 :visible 選擇器的語法：

$(":visible")

引數

:visible 選擇當前在 DOM 中可見的所有元素。

示例 1

在下面的示例中，我們使用:visible 選擇器來選擇所有可見的 <p> 元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p:visible").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <p>This paragraph is visible.</p>
    <p style="display: none">This paragraph is hidden.</p>
    <p style="visibility: hidden;">This paragraph is not visible.</p>
</body>
</html>

執行上述程式後，:visible 選擇所有可見的 <p> 元素，並用黃色背景顏色突出顯示它們。

示例 2

在這個示例中，我們顯示一個警報（顯示計數）來表示可見的 div 元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            var visibleDivs = $("div:visible").length;
            alert("There are " + visibleDivs + " visible div elements.");
        });
    </script>
</head>
<body>
    <div>This div is visible.</div>
    <div style="display : none">This div is hidden.</div>
</body>
</html>

當我們執行上述程式時，它將顯示一個警報，其中包含可見 div 元素的計數。

jquery_ref_selectors.htm

列印頁面