Wrap elements with another element with a class using jquery
if you are searching about how we can add a div before opening the table tag and add a close div tag after the table closing tag or simply you want to wrap your existing element with another element then this article is very useful for you.
This technique is very useful when you are working on a dynamic content website and you want some elements wrapped with another element on whole the page or a specific element using jquery. So, Jquery has a wrap() method that can take any string or object that could be passed to the $() factory function to specify a DOM structure. It may be more level deep, A copy of this structure will be wrapped around each of the existing elements in the set of selected or matched elements. and it will return the original set of elements by wrapping it with the element you defined.
let's say we have lots of tables on our web page and the table have multiple columns now we want to make all table wrapped by a div with class table-responsive.
Simply we can get the below jquery code on the insight document ready function so it will cover all tables with a defined div when the page load.
$(document).ready(function() {
$('table').wrap('<div class="table-responsive"></div>');
});
let's see another example with a live demo on button click we can see what is happening exactly.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-content">
<table>
<tr>
<th>Test table col</th>
</tr>
</table>
</div>
<button>Click to add</button>
<script>
$(document).ready(function(){
//before added
console.log($('.main-content').html());
$("button").click(function(){
$("table").wrap("<div class='table-responsive'></div>");
//after added
console.log($('.main-content').html());
});
});
</script>
How can we wrap all images with a link and the link should be the image src attribute?
Let's say we have a web page with multiple images and we want to link all images with the image link so that when the user clicks on the image then the image should open on the new tab, and we don't want to add a link manually then this trick will be helpful. Here is an example:
$(document).ready(function () {
$('.post_desc_inn img').wrap(function () {
return '<a href="' + this.src + '" target="_blank"></a>';
});
});