jQuery [attribute*=value] Selector

Quiz

The [attribute*=value] Selector in jQuery is used to select elements with an attribute that contains a specified substring. The substring that should be matched with the attribute's value is case-sensitive.

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 substring that should be contained within the attribute's value.

Example 1

In the following example, we are using the jQuery [attribute*=value] Selector to select all elements with a class attribute containing 'highlight' −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("[class*=highlight]").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <div class="highlighted">This div has 'highlight' in its class.</div>
    <div class="notHighlighted">This div does not have 'highlight' in its class.</div>
    <div class="highlightMe">This div also has 'highlight' in its class.</div>
</body>
</html>

The selected <div> elements will be highlighted with yellow background color.

Example 2

In this example, we are selecting all elements with a data-info attribute containing 'example' −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("[data-info*=example]").css("border", "2px solid blue");
        });
    </script>
</head>
<body>
    <p data-info="exampleOne">This paragraph has 'example' in its data-info attribute.</p>
    <p data-info="noExample">This paragraph does not have 'example' in its data-info attribute.</p>
    <p data-info="exampleTwo">This paragraph also has 'example' in its data-info attribute.</p>
</body>
</html>

All the selected elements will be highlighted with solid blue color.

jquery_ref_selectors.htm

Print Page