logo oujood
🔍

jQuery La méthode wrap() et unwrap

OUJOOD.COM

Définition et Usage  La méthode  wrap()

jQuery cours tutorial

Envelopper le ou les éléments sélectionnés d’une structure HTML.

Syntaxe

$(sélecteur).wrap(wrappingElement)

Paramètre Description
wrappingElement Obligatoire. Spécifie quels éléments HTML se répartit autour de chaque élément sélectionné.
Valeurs possibles :
  • Les balises HTML- comme : « <div> </div> » ou « <div> <b> </b> </div> »
  • Élément DOM - comme document.createElement("div")
  • Éléments existants - comme $(".div1")
    Note : Les éléments existants seront copiés et encapsuleront  chaque élément sélectionné

Exemple : Enveloppez chaque élément p d'un élément div

Exemple :    📝  Copier le code 


  <!DOCTYPE html>
  <html>
  <head>
  <script
  src=«https://code.jquery.com/jquery-3.6.0.min.js»></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").wrap("<div></div>");
    });
  });
  </script>
  <style>
  div{background-color:yellow;}
  </style>
  </head>
  <body>
  <p>Ceci est un paragraphe.</p>
  <p>Ceci est un autre paragraphe.</p>
  <button>Enveloppez chaque élément p d'un élément
  div</button>
  </body>
  </html>

Enveloppez les éléments à l'aide d'une fonction

À l'aide d'une fonction pour spécifier ce qu'il faut mettre  autour de chaque élément sélectionné.

Syntaxe

$(sélecteur).wrap(function ())

Paramètre Description
function ( ) Obligatoire. Spécifie une fonction qui retourne l'élément d'habillage

Exemple : Enveloppez l'élément p d'un élément div à l’aide d’une fonction

Exemple :    📝  Copier le code 


  <!DOCTYPE html>
  <html>
  <head>
  <script
  src=«https://code.jquery.com/jquery-3.6.0.min.js»></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").wrap(function(){
        return "<div></div>"
      });
    });
  });
  </script>
  <style>
  div{background-color:yellow;}
  </style>
  </head>
  <body>
  <p>Ceci est un paragraphe.</p>
  <button>Enveloppez l'élément p d'un élément
  div</button>
  </body>
  </html>

Enveloppement à l'aide d'une méthode  DOM pour créer un nouvel élément

Comment utiliser document.createElement(), pour créer un élément  autour de chaque élément sélectionné.

Exemple créer un nouveau élément div autour de chaque élément p

Exemple :    📝  Copier le code 


  <!DOCTYPE html>
  <html>
  <head>
  <script
  src=«https://code.jquery.com/jquery-3.6.0.min.js»></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").wrap(document.createElement("div"));
    });
  });
  </script>
  <style>
  div{background-color:yellow;}
  </style>
  </head>
  <body>
  <p>Ceci est un paragraphe.</p>
  <p>Ceci est un autre paragraphe.</p>
  <button>Créer un nouveau élément div autour de chaque
  élément p</button>
  </body>
  </html>

jQuery la méthode HTML unwrap() 

La méthode unwrap() supprime l'élément parent des éléments sélectionnés.

Syntaxe

$(selector).unwrap()

Exemple Supprimez l'élément parent de tous les éléments p :

Exemple :    📝  Copier le code 


  <!DOCTYPE html>
  <html>
  <head>
  <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").unwrap();
    });
  });
  </script>
  <style>
  div{background-color:yellow;}
  </style>
  </head>
  <body>
  <div>
  <p>Ceci est un paragraphe.</p></div><div>
  <p>Ceci est un autre paragraphe.</p></div>
  <button>Enlever l'élément parent de tous les élément p
  </button>
  </body>
  </html>

Emballer et déballer un élément
Comment basculer entre emballage et Dévoilement d'un élément.

Exemple :    📝  Copier le code 


  <!DOCTYPE html>
  <html>
  <head>
  <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").toggle(function(){
      $("p").wrap("<div></div>");},
      function(){
      $("p").unwrap();
    });
  });
  </script>
  <style>
  div{background-color:yellow;}
  </style>
  </head>
  <body>
  <p>Ceci est un paragraphe.</p>
  <p>Ceci est un autre paragraphe.</p>
  <button>Emballer et déballer </button>
  </body>
  </html>

jQuery HTML wrapAll() méthode

wrapAll() enveloppe tous les éléments sélectionnés par un élément html

Syntaxe

$(sélecteur).wrapAll(wrappingElement)

Paramètre Description
wrappingElement Obligatoire. Spécifie quels éléments HTML pour envelopper les éléments sélectionnés.
Valeurs possibles :
  • Comme les éléments HTML-« <div> </div> » ou « <div> <b> </b> </div> »
  • Élément DOM - comme document.createElement("div")
  • Éléments existants - comme $(".div1")
    Note : Les éléments existants seront copiés et enroulés autour des éléments sélectionnés.

Exemple Enveloppez un élément div autour de tous les éléments p :

Exemple :    📝  Copier le code 


  <!DOCTYPE html>
  <html>
  <head>
  <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script
  src="jquery.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").wrapAll("<div></div>");
    });
  });
  </script>
  <style>
  div{background-color:yellow;}
  </style>
  </head>
  <body
  <p>Ceci est un paragraphe.</p>
  <p>Ceci est un autre paragraphe.</p>
  <button>Enveloper les élément p </button>
  </body>
  </html>


JQuery les méthodes pour manipuler HTML
Par gerywa 25 juillet 2014