javascript - jQuery - velg det tilknyttede etikettelementet til et inputfelt

Jeg har et sett med inndatafelt, noen av dem har tilknyttede etiketter, noen ikke:

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

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

<input ... />

Så, hvordan kan jeg velge den tilknyttede etiketten for hver input, hvis den finnes?

Svar #1

Du bør ikke stole på rekkefølgen av elementer ved å bruke prev eller next. Bare bruk for-attributtet til etiketten, da det skal tilsvare ID-en til elementet du for øyeblikket manipulerer:

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

Imidlertid er det noen tilfeller der etiketten ikke vil ha for satt, i hvilket tilfelle etiketten vil være forelderen til den tilknyttede kontrollen. For å finne den i begge tilfeller kan du bruke en variasjon av følgende:

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;
    }
}

Svar #2

Det er to måter å angi etikett for elementet på:

  1. Setter merkets "for"-attributt til elementets id
  2. Plassere elementet inne i etiketten

Så, den riktige måten å finne elementets etikett på er

   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
   }

Svar #3

Så lenge dine input og label elementer er knyttet sammen gjennom sine id og for attributter, bør du kunne gjøre noe som dette:

$('.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!
   }
});

Hvis for ikke er satt, har elementene uansett ingen semantisk relasjon til hverandre, og det er ingen fordel med å bruke label-tagen i det tilfellet, så forhåpentligvis vil du alltid ha den relasjonen definert.

Relaterte artikler