oujood.com

jQuery Sélecteur :empty Sélectionnez tous les éléments qui n'ont ni enfants ni texte

jQuery Sélecteur :empty Sélectionnez tous les éléments qui n'ont ni enfants ni texte

chercher |

Définition et utilisation Sélecteur :empty

Le sélecteur :empty  sélectionne les éléments vides.

Un élément vide est un élément sans enfant et ne contenant pas de texte.

Note :

Le W3C recommande que l'élément <p> doit avoir  au moins un nœud enfant, même si cet enfant est simplement du texte (voir http://www.w3.org/TR/html401/struct/text.html#edef-P). Certains autres éléments, en revanche, sont vides par définition (c.-à-d. n’ont pas d'enfants) par exemple: <input>, <img>, <br> et <hr>, .

Syntaxe

$(":empty")

Exemple :

Exemple :       Copier le code

  <!DOCTYPE html>
   <html lang="fr">
   <head>
        <meta charset="utf-8">
     <title>jQuery sélecteur élément vide </title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("td:empty").text("C'est vide!").css('background', '#eeff11');
  });
  </script>
  <style>
    td { text-align:center; }
    </style>
  </head>
  <body>
  <h1>Bien venu dans le tutoriel JQuery</h1>
  <table border="1">
      <tr><td>TD
  #0</td><td></td></tr>
      <tr><td>TD
  #2</td><td></td></tr>
  <tr><td></td><td>TD#5</td></tr>
    </table>
  </body>
  </html>

/!\ Attention !!!

Malheureusement les sauts de ligne sont considérés comme contenu d'éléments (FF et Chrome) de même pour les espaces.

Si vous utilisez firefox ou chrome. Vous avez pu constater ce problème dans l’exemple ci-dessus, le second td de la première ligne du tableau est vide et portant il n’a pas été sélectionné car le saut de ligne a été considéré comme du texte.

Le seul remède à ce problème écrivez toujours vos balise sur la même ligne.

Par gerywa 25 juillet 2014



Voir aussi nos tutoriel :

border-color

Définit la couleur des quatre frontières

list-style-image

Spécifie une image comme marqueur list-item

Nouveaux éléments de formulaire

Nouveaux éléments de formulaire