Attribute$ Value in jQuery
To swiftly and simply access elements or groups of elements within an HTML document’s Document Object Model (DOM), jQuery offers strong techniques called selectors. This simplifies event management, animation, and Ajax interactions in web development. Using jQuery to identify and manipulate items in the DOM is more efficient than writing numerous lines of JavaScript code.
A particular kind of jQuery selector is the attribute selector, which enables you to locate elements according on the value or existence of their HTML attributes. One specialised attribute selector that matches elements whose given attribute’s value ends with a specific string is [attr$=’value’].
Syntax:
This selector has the following general syntax:
$('tagname[attribute$=value]')Let’s break down each part of the syntax:
$(): The jQuery factory function, $(), is the main method for choosing items. This symbol is the starting point for all jQuery selectors.
tagname: This is an optional field.
- Only items of that particular kind will be targeted by the selection if you add an HTML tag name (such as a, div, or p). For example, just tags would be examined by $(‘a[rel$=value]’).
- Without a tag name (e.g., $[attribute$=value]), the selection affects all document elements with the attribute.
attribute: Select an HTML attribute ( href, rel, id, class).
$ =: The operator “ends with” is this. In the value section, it instructs jQuery to search for attributes whose values end with the precise string.
‘value’: For an element to be chosen, the string value at the end of the attribute’s content must be this. It needs to be enclosed in either one or two quote marks.
How it Works
The [attr$=’value’] selector allows jQuery’s selection engine (Sizzle) to process your request quickly. It first determines which elements possess the given attribute. It then looks at the value of that attribute for each of these elements. The returned jQuery object (or “matched set”) contains the element if the value of the attribute’s end precisely matches the value string you supplied in your selector. Only components that meet this particular requirement for ending are chosen. This approach is especially helpful for dynamically targeting items that adhere to a specific pattern or naming convention.
Code Example
Let’s demonstrate using an example that, per the chooses anchor () elements according to their rel property ending in’self’.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery [attr$='value'] Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.highlight {
border: 2px solid red;
background-color: #ffe6e6;
display: inline-block;
padding: 4px;
}
</style>
</head>
<body>
<h2>Useful Links</h2>
<a href="#" rel="author-self">About the Author</a><br>
<a href="#" rel="contact-info">Contact Us</a><br>
<a href="#" rel="project-self">Our Portfolio</a><br>
<a href="#" rel="policy">Privacy Policy</a><br>
<a href="#" rel="help-self">FAQs</a><br>
<script>
$(document).ready(function() {
$("a[rel$='self']").addClass("highlight");
$("a[rel$='self']").each(function() {
console.log("Matched Link Text:", $(this).text());
});
});
</script>
</body>
</html>Output:
Useful Links
About the Author
Contact Us
Our Portfolio
Privacy Policy
FAQsExplanation of the Code Example:
HTML Setup: The HTML has a collection of anchor () elements, each of which has a rel attribute with a range of values. There are several of these rel attribute values that finish in’self’ (author-self, project-self, help-self), while others (contact-info, policy) do not. A simple CSS course.Additionally, highlight is defined for visual feedback.
jQuery Inclusion: The script src=”…”> line provides a connection to the jQuery library, enabling its functions.
$(document).ready(): The code inside its function will only execute once the entire web page (the DOM) has been fully loaded and is prepared for manipulation, with this essential jQuery method. This avoids issues that might arise if the script attempts to access unrenderable items.
The Selector ($(“a[rel$=’self’]”)):
- a: Indicates that tags are the only ones of interest.
- The attribute selector [rel$=’self’] is responsible for carrying out the fundamental filtering. jQuery is instructed to locate only elements whose rel attribute value ends in the string’self’.
.addClass(“highlight”): The CSS class “highlight” is applied by the.addClass() method for each element that the selector has successfully matched. This will visually alter the chosen links to have a light pink background and a red border, as specified in the <style> block.
Console.log(): The console.log() commands are employed in verification and debugging. They output messages and text content of selected components to the browser developer console to check which links the selector targeted.
This code will give “About the Author,” “Our Portfolio,” and “Frequently Asked Questions” a pink background and crimson border, but the other links will stay. The console output will also show these three URLs’ text to check the selector’s targeting.