jQuery - sélectionnez l'étiquette associée élément d'un champ de saisie

Question

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 pour chaque entrée, si elle existe?

Answer 1

Vous ne devriez pas compter sur l'ordre des éléments à l'aide de prev ou next. Utilisez simplement l' for attribut du label, il doit correspondre à l'ID de l'élément que vous êtes en train de manipuler:

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

Cependant, il existe certains cas où l'étiquette n'aura pas d' for ensemble, auquel cas l'étiquette sera le parent de son contrôle associés. Pour le trouver dans les deux cas, vous pouvez utiliser une variante de l'suivantes:

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 cela aide!

Answer 2

Il y a deux façons de spécifier de l'étiquette de l'élément:

1. Réglage de l'étiquette de "pour" l'attribut id de l'élément
2. Placer l'élément à l'intérieur de l'étiquette

Donc, la bonne façon de trouver label 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
   }

Answer 3

Tant et votre input et label des éléments sont associés par leur id et for attributs, vous devriez être en mesure de 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éfinie, alors la n'ont pas de relation sémantique les uns des autres de toute façon, et il n'y a aucun avantage à l'utilisation de la balise d'étiquette dans cette instance, alors j'espère que vous aurez toujours que la relation définie.