web-dev-qa-db-fra.com

jQuery - sélectionne l’élément label associé à un champ de saisie

J'ai un ensemble de champs de saisie, certains d'entre eux ont des étiquettes associées, d'autres non:

<label for="bla">bla</label> <input type="text" id="bla" />

<label for="foo">bla <input type="checkbox" id="foo" /> </label>

<input ... />

alors, comment puis-je sélectionner l'étiquette associée à chaque entrée, si elle existe?

javascriptjqueryforms
100
Alex

Vous ne devriez pas vous fier à l'ordre des éléments en utilisant prev ou next. Utilisez simplement l'attribut for de l'étiquette, car il devrait correspondre à l'ID de l'élément que vous manipulez actuellement:

var label = $("label[for='" + $(this).attr('id') + "']");

Cependant, dans certains cas, le libellé de l'étiquette ne sera pas défini sur for, auquel cas il sera le parent de son contrôle associé. Pour le trouver dans les deux cas, vous pouvez utiliser une variante de ce qui suit:

var label = $('label[for="' + $(this).attr('id') + '"]');

if(label.length <= 0) {
    var parentElem = $(this).parent(),
        parentTagName = parentElem.get(0).tagName.toLowerCase();

    if(parentTagName == "label") {
        label = parentElem;
    }
}

J'espère que ça aide!

181
jgradim

Il existe deux manières de spécifier une étiquette pour un élément:

  1. Définition de l'attribut "for" de l'étiquette sur l'identifiant de l'élément
  2. Placer l'élément à l'intérieur de l'étiquette

Donc, la bonne façon de trouver l'étiquette de l'élément est

   var $element = $( ... )

   var $label = $("label[for='"+$element.attr('id')+"']")
   if ($label.length == 0) {
     $label = $element.closest('label')
   }

   if ($label.length == 0) {
     // label wasn't found
   } else {
     // label was found
   }
47
Maxim Kulkin

Tant que vos éléments input et label sont associés à leurs attributs id et for, vous devriez pouvoir faire quelque chose comme ceci:

$('.input').each(function() { 
   $this = $(this);
   $label = $('label[for="'+ $this.attr('id') +'"]');
   if ($label.length > 0 ) {
       //this input has a label associated with it, lets do something!
   }
});

Si for n'est pas défini, les éléments n'ont de toute façon pas de relation sémantique et l'utilisation de la balise label ne présente aucun avantage. Par conséquent, nous espérons que cette relation sera toujours définie.

15
Nathan Anderson