wrap unWrap wrapInner wrapAll
wrap, unWrap, wrapAll, wrapInner() methods In jQuery

In This Blog, you are going to learn 5 very important methods of jQuery, which is very beneficial in your jQuery development because these methods are very useful methods for jQuery developers.

jQuery wrap() method

jQuery wrap() method is used to wrap specified HTML elements around each selected element.

jQuery unwrap() method

The unwrap() method is an built-in method in jQuery which is used to remove the parent element from the selected element.

jQuery wrapInner() method

The wrapInner() method wraps specified HTML element(s) around the content (innerHTML) of each selected element.

jQuery wrapAll() method

The wrapAll() method wraps specified HTML element(s) around all selected elements.

Source Code Of ALL 4 Methods In jQuery

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
    <style>
    
    
        #div1
        {
            height:200px;
            width:200px;
            border:10px black double;
            background-color: orange;
        }
    
    </style>
</head>

<body>
    <p id="p1">This is my Paragraph 1</p>
    <p id="p2">This is my Paragraph 2</p>
    <p id="p3">This is my Paragraph 3</p>
    <br>
    <input type="button" value="Wrap" id="btn1">
    <input type="button" value="UnWrap" id="btn2">
    <input type="button" value="Wrap All" id="btn3">
    <input type="button" value="Wrap Inner" id="btn4">
    <input type="button" value="Un Wrap Inner" id="btn5">
    
<script src="jquery.js"></script>
    
<script>

    $(document).ready(function(){
        
        $("#btn1").click(function(){
            
            $("p").wrap("<div id='div1'></div>");
            
        });
        
        $("#btn2").click(function(){
            
            $("p").unwrap();
            
        });
        
        $("#btn3").click(function(){
            
//            $("p").wrapAll("<div id='div1'></div>");
            $("#p1, #p2").wrapAll("<div id='div1'></div>");
            
        });
        
        $("#btn4").click(function(){
            
            $("#p1").wrapInner("<b><i></i></b>");
            
        });
        
        $("#btn5").click(function(){
            
            $("#p1 > b,i").contents().unwrap();
            
        });
        
    });
    
</script>
</body>
</html>

jQuery Each( ) Method

jQuery’s each() function is used to loop through each element of the target jQuery object, an object that contains one or more DOM elements.

Source Code Of jQuery Each Method

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
    
    
<!--
    <p>Welcome To Html</p>
    <p>Welcome To CSS</p>
    <p>Welcome To JavaScript</p>
    <p>Welcome To JQuery</p>
-->
    
    <ul>
        <li>Pakistan</li>
        <li>Canada</li>
        <li>USA</li>
        <li>Greece</li>
    </ul>
    
<script src="jquery.js"></script>
<script>

    $(document).ready(function(){
        
        $("li").each(function(index, element){
            
            var country = $(element).text();
            alert("Index is = " + index + " Element is = " + country);
            
        });
        
//        $("p").each(function(){
//            
//            var para = $(this).text();
//            alert(para);
//            
//        });
        
    });
</script>    

</body>
</html>

Click Below Link to Download Notes & Source Code Of This Blog

https://www.mediafire.com/file/8y5ea8cr6bwpan8/EACH+AND+WRAP+METHODS+IN+JQUERY.rar/file

No responses yet

Leave a Reply

Your email address will not be published. Required fields are marked *