jQuery [attribute$=value] Selector

Quiz

The [attribute$=value] selector in jQuery is used to select elements with an attribute value that ends with a specific string.

This selector is useful when we need to target elements based on the ending of an attribute's value, such as file extensions, class names, or URL endings.

Syntax

Following is the syntax of [attribute$=value] Selector in jQuery −

$("[attribute$='value']")

Parameters

Here is the description of the above syntax −

attribute: The name of the attribute you want to match.
value: The ending string you want to match in the attribute's value. This is case-sensitive.

Example 1

In the following example, we are using the [attribute$=value] selector to select all the href attribute that ends with ".pdf" −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("a[href$='.pdf']").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <a href="document.pdf">PDF Document</a><br>
    <a href="image.jpg">JPEG Image</a><br>
    <a href="report.pdf">PDF Report</a><br>
    <a href="profile.html">HTML Profile</a>
</body>
</html>

After executing the above program, the selected elements will be highlighted with yellow background color.

Example 2

In this example, we are selecting all elements with a href attribute that ends with ".png" −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("img[src$='.png']").css("border", "2px solid blue");
        });
    </script>
</head>
<body>
    <img src="photo.png" alt="PNG Image"><br>
    <img src="photo.jpg" alt="JPEG Image"><br>
    <img src="icon.png" alt="PNG Icon"><br>
    <img src="avatar.gif" alt="GIF Avatar">
</body>
</html>

After executing the above program, the selected elements will be highlighted with solid blue color.

jquery_ref_selectors.htm

Print Page