Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to wrap two adjacent elements in a containing div using jQuery?
To wrap two adjacent elements in a containing div using jQuery, you need to loop through each element with a specific class, add it to an array, and determine if the next element has the same class. This technique is useful for grouping consecutive elements that share common styling or behavior.
The approach involves checking each element to see if its next sibling has the target class. When we find an element whose next sibling doesn't have the class (or doesn't exist), we know we've reached the end of a group and can wrap all collected elements.
Example
You can try to run the following code to learn how to wrap two adjacent elements in a containing div ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var result = [];
$('.myclass').each(function() {
var box2 = $(this).next().hasClass('myclass');
result.push($(this));
if(!box2) {
var container = $('<div class="result"></div>');
container.insertBefore(result[0]);
for(x = 0; x < result.length; x++) {
result[x].appendTo(container);
}
result = [];
}
});
});
</script>
<style>
div.result {
background: #4486EC;
margin: 10px 0;
padding: 10px;
border: 2px solid #333;
}
.myclass {
background: #f0f0f0;
padding: 5px;
margin: 2px 0;
}
</style>
</head>
<body>
<p>Demo text</p>
<div class="myclass">First group - Element 1</div>
<div class="myclass">First group - Element 2</div>
<p>This is demo text separating groups.</p>
<div class="myclass">Second group - Element 1</div>
<div class="myclass">Second group - Element 2</div>
</body>
</html>
The output shows two groups of adjacent elements, each wrapped in a blue container div ?
Demo text [Blue Container 1] First group - Element 1 First group - Element 2 This is demo text separating groups. [Blue Container 2] Second group - Element 1 Second group - Element 2
How It Works
The script works by:
1. Collecting elements: Each element with .myclass is added to the result array.
2. Checking adjacency: The next().hasClass('myclass') method determines if the next sibling element also has the target class.
3. Creating containers: When an element is not followed by another element with the same class, a new <div> with class result is created to wrap all collected elements.
4. Wrapping elements: All elements in the result array are moved into the new container div using appendTo().
Conclusion
This jQuery technique effectively groups and wraps consecutive elements sharing the same class, making it useful for organizing content dynamically and applying consistent styling to related elements.
402 Views
