Médiaforma

All posts tagged éléments

Vous appliquerez la méthode remove() aux éléments jQuery à supprimer.

Saisissez le code suivant dans Notepad++ et enregistrez-le sous le nom supprimer-contenu.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insertion de contenu dans le DOM</title>
    <script src="jquery.js"></script>
  </head>
  <body>
    <h2>Partie 1</h2>
    <p>Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.</p>
    <ul>
      <li>un
      <li>deux
      <li>trois
      <li>quatre
    </ul>
    <hr>
    <h2>Partie 2</h2>
    <p>Illud autem non dubitatur quod cum esset aliquando virtutum omnium domicilium Roma, ingenuos advenas plerique nobilium, ut Homerici bacarum suavitate Lotophagi, humanitatis multiformibus officiis retentabant.</p>
    <ul>
      <li>premier
      <li>deuxième
      <li>troisième
    </ul>
    <hr>
    <script>
      $(function() {
        $('p').remove();
      });
    </script>
  </body>
</html>

 

Exercice : Insérez le code nécessaire pour supprimer tous les paragraphes (<p>).

Solution :

$('p').remove();

 

Exercice : Supprimer le deuxième enfant <li> des balises <ul>

Solution :

$('li:nth-child(2)').remove();

Quatre méthodes permettent d’insérer un élément (el) avant ou après l’élément ciblé (cible) :

  • el.appendTo(cible) insère un élément à la fin de la cible
  • el.prependTo(cible) insère un élément au début de la cible
  • el.insertBefore(cible) insère un élément avant la cible
  • el.insertAfter(cible) insère un élément après la cible

Saisissez ce code dans Notepad++ et sauvegardez-le sous le nom inserer-elements.htm.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insertion d'éléments</title>
    <script src="jquery.js"></script>
  </head>
  <body>
<h2>Titre</h2>
  <div class="parent">
    <div>Bonjour</div>
    <div>jQuery</div>
  </div>
  <script>
      $(function() {
        //$('<p>Comment ça va ?</p>').appendTo('.enfant');
      });
    </script>
  </body>
</html>

 

Exécutez ce code dans Firefox. Supprimez les commentaires et ré exécutez ce code. Voici le résultat :

 

Expérimentez les méthodes prependTo(), insertBefore() et insertAfter() pour comprendre leurs différences.

Si vous ne voyez pas la différence entre appendTo() et insertAfter(), ou entre prependTo() et insertBefore(), utilisez Firebug pour visionner le code généré. Pour cela, appuyez sur la touche F12, sélectionnez l’onglet HTML et développez les balises <body> puis <div> :

 


Commencez par saisir ce code et sauvegardez-le sous le nom remplacer-contenu.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insertion de contenu dans le DOM</title>
    <script src="jquery.js"></script>
  </head>
  <body>
    <h2>Partie 1</h2>
    <p>Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.</p>
    <ul>
      <li>un
      <li>deux
      <li>trois
      <li>quatre
    </ul>
    <hr>
    <h2>Partie 2</h2>
    <p>Illud autem non dubitatur quod cum esset aliquando virtutum omnium domicilium Roma, ingenuos advenas plerique nobilium, ut Homerici bacarum suavitate Lotophagi, humanitatis multiformibus officiis retentabant.</p>
    <ul>
      <li>premier
      <li>deuxième
      <li>troisième
    </ul>
    <hr>
    <script>
      $(function() {
      });
    </script>
  </body>
</html>

 

Vous utiliserez la méthode replaceWith() pour remplacer la sélection.

Par exemple, pour remplacer tous les éléments hr par des éléments br, vous utiliserez cette instruction :

$('hr').replaceWith('<br>');

 

Exercice : remplacez tous les paragraphes par le texte “Ceci est un paragraphe”.

Solution :

$('p').replaceWith('Ceci est un paragraphe');

 

Exercice : remplacer les listes ul par des listes ol

Si vous avez songé à cette instruction :

$('ul').replaceWith('ol');

 

Le résultat est loin de ce qui était attendu :

 

Pour comprendre ce qui s’est passé, utilisez Firebug.

Appuyez sur F12, sélectionnez l’onglet HTML et développez l’élément body :

 

Les éléments ul ont été remplacés par des éléments ol et les enfants li ont été supprimés.

Il va donc falloir utiliser une autre méthode. Vous allez parcourir chacun des éléments ul avec la méthode each() et les remplacer par une balise <ol> suivie du contenu de l’élément ol et de la balise </ol> :

$('ul').each(function(){
  var dum=$(this);
  dum.replaceWith('<ol>'+dum.html()+'</ol>');
});

 

Voici le résultat :

 

Voyons si vous avez compris. Ajoutez quelques instructions jQuery pour remplacer tous les titres h2 de la page par des titres h1.

Voici la solution :

$('h2').each(function(){
  var dum=$(this);
  dum.replaceWith('<h1>'+dum.html()+'</h1>');
});

La fonction shuffle() mélange automatiquement les éléments du tableau qui lui est passé en argument.
Faites une pause dans la vidéo. Saisissez ce code et sauvegardez-le :

<?php
 $nombres = array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20);
 shuffle($nombres);
 foreach($nombres as $element)
 echo $element."<br>";
?>

Exécutez-le en utilisant WAMP Server. Comme vous pouvez le voir, les nombres sont mélangés de façon aléatoire.
Appuyez sur la touche F5 pour rafraîchir la page, les nombres sont à nouveau mélangés aléatoirement.

 


Pour mettre en forme un document HTML, il peut être utile de sélectionner les éléments qui possèdent un attribut donné. Dans cet exemple, nous allons affecter la couleur rouge aux paragraphes qui possèdent un attribut align.

Le corps du document contient six balises <p>. Quatre d’entre elles ont un attribut align.

Pour défdinir les caractéristiques des balises <p> qui possèdent un attribut align, vous utiliserez le sélecteur p[align]. Ici par exemple, nous affectons la couleur rouge aux balises qui possèdent un attribut align :

p[align] {color: red;}

Voici le résultat :