jQuery - 입력 필드의 관련 레이블 요소를 선택합니다.

jQuery - 입력 필드의 관련 레이블 요소를 선택합니다.

이 질문에는 이미 다음과 같은 답변이 있습니다.

지정된 입력과 연관된 HTML 레이블 찾기 (23개 답변)

닫힘9년 전에.

입력 필드 세트가 있으며 일부는 레이블이 연결되어 있고 일부는 연결되어 있지 않습니다.

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

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

<input ... />

그렇다면 각 입력에 대한 관련 레이블이 존재할 경우 어떻게 선택할 수 있습니까?

를 사용하여 요소의 순서에 의존해서는 안 됩니다.prev아니면next. 그냥.for현재 조작 중인 요소의 ID에 해당해야 하는 레이블의 속성:

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

하지만 라벨에 다음과 같은 내용이 포함되지 않는 경우도 있습니다.forset. 이 경우 레이블은 관련 컨트롤의 상위 레이블이 됩니다.두 경우 모두에서 이 값을 찾으려면 다음의 변형을 사용할 수 있습니다.

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

요소에 대한 레이블을 지정하는 방법은 두 가지입니다.

1. 레이블의 "for" 특성을 요소의 ID로 설정
2. 라벨 안쪽에 요소 배치

따라서 원소의 라벨을 찾는 적절한 방법은

   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
   }

당신과 당신의input그리고.label요소들은 그것들에 의해 연관됩니다.id그리고.for속성, 다음과 같은 작업을 수행할 수 있어야 합니다.

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

한다면for설정되지 않으면 요소들이 서로 의미적인 관계를 갖지 않으며, 해당 인스턴스에서 레이블 태그를 사용하면 이점이 없으므로 항상 해당 관계가 정의되기를 바랍니다.

언급URL : https://stackoverflow.com/questions/4844594/jquery-select-the-associated-label-element-of-a-input-field