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...
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>
jQuery wrap elements asp.net core docker | |
| 176 Likes | 176 Dislikes |
| 51,482 views views | 524K followers |
| Education | Upload TimePublished on 16 Apr 2015 |
Không có nhận xét nào:
Đăng nhận xét