oujood.com

jQuery La méthode wrap() et unwrap

Envelopper d'une structure HTML  tous les éléments, Envelopper d'une structure HTML chaque élément, Supprime l'élément parent des éléments

chercher |

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

Sélectionner 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

Sélectionner 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

Sélectionner 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 :

Sélectionner 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.

Sélectionner 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 :

Sélectionner 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

MARKETPOWER-IA
Logiciel d'I.A.
Logiciel d'I.A. 100% Français pour lancer son business en ligne

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE

Consulter


1tpe