jQuery wrap elements
Автор: kudvenkat
Загружено: 2015-04-16
Просмотров: 65457
Link for all dot net and sql server video tutorial playlists
https://www.youtube.com/user/kudvenka...
Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspo...
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
/ @aarvikitchen5572
In this video we will discuss how to wrap and unwrap elements
The following jquery methods are used to wrap and unwrap elements. Since these methods modify DOM, they belong to DOM manipulation category.
wrap
unwrap
wrapAll
wrapInner
wrap - Wrap an HTML structure around each element in the set of matched elements.
Consider the following HTML
<div id="div1">
DIV 1
</div>
<div id="div2">
DIV 2
</div>
<div id="div3">
DIV 3
</div>
The following line of code wraps each of the above div element with another div element.
$('div').wrap('<div class="containerDiv"></div>');
So the HTML in the DOM would now look as shown below. To view the DOM HTML use the browser developer tools.
<div class="containerDiv">
<div id="div1">
DIV 1
</div>
</div>
<div class="containerDiv">
<div id="div2">
DIV 2
</div>
</div>
<div class="containerDiv">
<div id="div3">
DIV 3
</div>
</div>
Example :
<html>
<head>
<title></title>
<style>
.containerDiv
{
background-color:red;
color:white;
font-weight:bold;
margin: 5px;
}
</style>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert($('div.containerDiv').length);
$('div').wrap('<div class="containerDiv"></div>');
alert($('div.containerDiv').length);
});
</script>
</head>
<body style="font-family:Arial">
<div id="div1">
DIV 1
</div>
<div id="div2">
DIV 2
</div>
<div id="div3">
DIV 3
</div>
</body>
</html>
unwrap - Remove the parents of the set of matched elements from the DOM.
Example :
<html>
<head>
<title></title>
<style>
.containerDiv
{
background-color:red;
color:white;
font-weight:bold;
margin: 5px;
}
</style>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert($('div.containerDiv').length);
$('div').wrap('<div class="containerDiv"></div>');
alert($('div.containerDiv').length);
$('div').unwrap();
alert($('div.containerDiv').length);
});
</script>
</head>
<body style="font-family:Arial">
<div id="div1">
DIV 1
</div>
<div id="div2">
DIV 2
</div>
<div id="div3">
DIV 3
</div>
</body>
</html>
wrapAll - Wrap an HTML structure around all elements in the set of matched elements.
Consider the following HTML
<div id="div1">
DIV 1
</div>
<div id="div2">
DIV 2
</div>
<div id="div3">
DIV 3
</div>
The following line of code wraps all of the matching div element with another div element.
$('div').wrapAll('<div class="containerDiv"></div>');
So the HTML in the DOM would now look as shown below.
<div class="containerDiv">
<div id="div1">
DIV 1
</div><div id="div2">
DIV 2
</div><div id="div3">
DIV 3
</div>
</div>
wrapInner - Wrap an HTML structure around the content of each element in the set of matched elements.
Consider the following HTML
<div id="div1">
DIV 1
</div>
<div id="div2">
DIV 2
</div>
<div id="div3">
DIV 3
</div>
The following line of code wraps each of the above div element content with another div element.
$('div').wrapInner('<div class="containerDiv"></div>');
So the HTML in the DOM would now look as shown below.
<div id="div1">
<div class="containerDiv">
DIV 1
</div>
</div>
<div id="div2">
<div class="containerDiv">
DIV 2
</div>
</div>
<div id="div3">
<div class="containerDiv">
DIV 3
</div>
</div>
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке:
