How to Use Attribute* Value Selector in jQuery With Example

Attribute* Value Selector

One of jQuery’s most useful selectors for identifying and modifying HTML elements depending on the content of their attributes is [attr*=’value’]. Included in the vast collection of CSS selectors provided by jQuery, this selector enables you to query (or locate) HTML elements and subsequently take action on them.

What is the Selector?

Elements that have a specific substring in their specified attribute are targeted by the [attr*=’value’] selector. Thus, the element is selected if the “value” string appears anywhere in the attribute. The ability to choose components based on a partial match rather than an exact match inside an attribute’s value is extremely important here.

Syntax:

To use this selector, the fundamental syntax is:

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

To narrow the options, enter an HTML tag like a, div, or p. If left off, all elements with the property will be selected.
attribute: Class, title, href, or src, the HTML attribute to examine.
The wildcard symbol *: Indicates that the provided value must be present in the attribute.
The precise string that must be present in the attribute’s content is called the “value” Usually, quotation marks enclose this value.

How it Works

By conducting a substring search within the value of the target attribute, the [attr*=’value’] selector works. Using this selector causes jQuery to cycle through all elements (or elements of a given type) and check the value of the specified element. It is included in the matched set if the given “value” string appears anywhere in the content of that attribute.

Regular expressions served as the model for this feature since they match patterns using a similar wildcard syntax. It allows flexible element selection when an attribute’s content is changeable or unpredictable. This selector is ideal for styling only links that point to a given site, regardless of the URL path.

Since version 1.3, jQuery’s selector engine Sizzle parses CSS selector expressions and builds elements that fulfil the requirements. After selecting elements, you may use any jQuery action or function to add/remove classes (.addClass(),.removeClass()), change attributes (.attr()), or change CSS values (.css()).

Code Example

Regardless of the particular Wikipedia page, let’s use an example where we wish to highlight all links on a webpage that lead to “wikipedia.org.”

<!DOCTYPE html>
<html>
<head>
    <title>Attribute Contains Selector Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .highlight {
            background-color: yellow;
            border: 1px solid orange;
            padding: 2px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            // Your jQuery code will go here
        });
    </script>
</head>
<body>
    <h1>My Favorite Websites</h1>
    <ul>
        <li><a href="https://www.google.com">Google Search</a></li>
        <li><a href="https://en.wikipedia.org/wiki/jQuery">jQuery on Wikipedia</a></li>
        <li><a href="https://www.mozilla.org/firefox/">Mozilla Firefox</a></li>
        <li><a href="https://en.wikipedia.org/wiki/Document_Object_Model">DOM on Wikipedia</a></li>
        <li><a href="https://www.amazon.com">Amazon</a></li>
        <li><a href="https://fr.wikipedia.org/wiki/JavaScript">JavaScript on French Wikipedia</a></li>
    </ul>
</body>
</html>

Output:

My Favorite Websites
•	Google Search
•	jQuery on Wikipedia
•	Mozilla Firefox
•	DOM on Wikipedia
•	Amazon
•	JavaScript on French Wikipedia

Explanation of the Code

HTML Setup: The HTML setup is as follows: An unordered list () and anchor tags () pointing to various websites. There is a link to the French Wikipedia and another to the English Wikipedia.

jQuery Inclusion: For quicker and more dependable loading, it is usual practice to include the jQuery library from a Content Delivery Network (CDN) in the script element located in the head> section.

CSS Styling: An Emphasis To make components visually distinguishable, the CSS class is designed to give them an orange border and a yellow backdrop.

$(document).ready(): This makes sure that the jQuery code only executes when the Document Object Model (DOM) has been properly built and the entire HTML document has loaded. This avoids potential issues that could arise from jQuery attempting to access unrenderable items.

$(‘a[href*=”wikipedia”]’): The [attr=’value’] selector is invoked here.

“a” means we are looking for “anchor” elements ().
Selector core is [href*=”wikipedia”]. jQuery is directed to find elements with “wikipedia” in their href property.

.addClass(‘highlight’): The highlight CSS class is added to all elements that match the selector using the.addClass(‘highlight’) function. This instantly makes the Wikipedia links visually distinct by applying the orange border and yellow background.

Only the links that lead to Wikipedia will have the orange border and yellow background when you load this HTML code in a browser, proving that the [attr*=’value’] selector is being used effectively.

Conclusion

In conclusion, by determining if a particular substring appears in any of the attribute values of an element, the [attr*=’value’] selector provides a flexible and effective method of choosing elements in jQuery that significantly increases the versatility of your web development.

Page Content

Tutorials