jQuery Adjacent Sibling Selector
The Adjacent Sibling Selector in jQuery is used to select an element that immediately follows another specified element. This selector targets elements that are directly adjacent to one another in the DOM hierarchy, meaning they share the same parent and the selected element comes right after the specified element.
Syntax
$("previous + next")
previousis the element that comes immediately before the target element.nextis the element that immediately follows thepreviouselement.
How It Works
- The Adjacent Sibling Selector uses the
+symbol to indicate that thenextelement must be immediately after thepreviouselement. - It selects only the immediate sibling of the specified element, not any further siblings that might follow.
Example Usage
1. Styling the Element Immediately Following Another Element
You can use the Adjacent Sibling Selector to apply styles to the element immediately following a specific element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Adjacent Sibling Selector Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("h2 + p").css("color", "red");
});
</script>
</head>
<body>
<h2>Heading 1</h2>
<p>This paragraph is red because it follows the h2 element.</p>
<p>This paragraph is not affected because it does not immediately follow the h2 element.</p>
<h2>Heading 2</h2>
<p>This paragraph is also red because it immediately follows the second h2 element.</p>
</body>
</html>
Explanation:
$("h2 + p")selects the<p>element that immediately follows each<h2>element. The selected<p>elements have their text color changed to red.
2. Applying Styles to the Element After a Specific Class
You can use the Adjacent Sibling Selector to apply styles to an element immediately after one with a specific class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Adjacent Sibling Selector Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$(".highlight + .info").css("background-color", "yellow");
});
</script>
</head>
<body>
<div class="highlight">Highlighted Div</div>
<div class="info">This div has a yellow background because it immediately follows the highlighted div.</div>
<div class="info">This div is not affected because it does not immediately follow the highlighted div.</div>
</body>
</html>
Explanation:
$(".highlight + .info")selects the<div>element with the classinfothat immediately follows a<div>element with the classhighlight. The background color of this<div>is changed to yellow.
Use Cases
- Styling Elements Based on Order: When you want to apply styles or effects to elements based on their position relative to a specific preceding element.
- Dynamic Content: Useful for handling dynamically loaded content where the position of elements can change, and you need to target elements based on their immediate sequence.
- Interactive Effects: Can be used to create interactive effects where the appearance or behavior of an element depends on its immediate predecessor.
Performance Considerations
- The Adjacent Sibling Selector is efficient as it only targets immediate siblings, reducing the scope of selection.
- Ensure the selectors are used carefully to avoid performance issues in very complex or large documents.