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

search |

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>

 



Par gerywa 25 juillet 2014

Trafic Booster
hebergement web

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

CSS3 couleur dégradé

Comment créer des couleurs dégradés en css3 ?

Le fond en css Arriére plan css

La propriété background est la propriété qui gére l'arriere plan d'un élément html...

La fonction chr, chr()

Retourne un caractère partir de son code ASCII



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci