[javascript] 주어진 입력과 관련된 html 레이블 찾기

Program / 글쓴이

html 양식이 있다고 가정 해 봅시다. 각 입력 / 선택 / 텍스트 영역은 해당해야합니다 <label>와 for그것의 동반자의 id에 속성 세트를. 이 경우 각 입력에는 하나의 레이블 만 있음을 알고 있습니다.

예를 들어 onkeyup 이벤트를 통해 자바 스크립트의 입력 요소가 주어지면 관련 레이블을 찾는 가장 좋은 방법은 무엇입니까?

답변

먼저 페이지에서 레이블을 스캔하고 실제 양식 요소에서 레이블에 대한 참조를 할당합니다.

var labels = document.getElementsByTagName('LABEL');
for (var i = 0; i < labels.length; i++) {
    if (labels[i].htmlFor != '') {
         var elem = document.getElementById(labels[i].htmlFor);
         if (elem)
            elem.label = labels[i];         
    }
}

그런 다음 간단하게 이동할 수 있습니다.

document.getElementById('MyFormElem').label.innerHTML = 'Look ma this works!';

조회 배열이 필요하지 않습니다. 🙂

답변

jQuery를 사용하는 경우 다음과 같이 할 수 있습니다.

$('label[for="foo"]').hide ();

jQuery를 사용하지 않는 경우 레이블을 검색해야합니다. 다음은 요소를 인수로 사용하고 관련 레이블을 반환하는 함수입니다.

function findLableForControl(el) {
   var idVal = el.id;
   labels = document.getElementsByTagName('label');
   for( var i = 0; i < labels.length; i++ ) {
      if (labels[i].htmlFor == idVal)
           return labels[i];
   }
}

답변

HTML5 표준 에는 입력 요소와 관련된 레이블을 가리키는 labels속성 이 있습니다 .

따라서 다음과 같은 것을 사용할 수 있습니다 (기본 labels속성에 대한 지원 이지만 브라우저가 지원하지 않는 경우 레이블 검색을위한 대체 기능 포함) …

var getLabelsForInputElement = function(element) {
    var labels = [];
    var id = element.id;

    if (element.labels) {
        return element.labels;
    }

    id && Array.prototype.push
        .apply(labels, document.querySelector("label[for='" + id + "']"));

    while (element = element.parentNode) {
        if (element.tagName.toLowerCase() == "label") {
            labels.push(element);
        }
    }

    return labels;
};

// ES6
var getLabelsForInputElement = (element) => {
    let labels;
    let id = element.id;

    if (element.labels) {
        return element.labels;
    }

    if (id) {
        labels = Array.from(document.querySelector(`label[for='${id}']`)));
    }

    while (element = element.parentNode) {
        if (element.tagName.toLowerCase() == "label") {
            labels.push(element);
        }
    }

    return labels;
};

jQuery를 사용하는 경우 더 쉽습니다.

var getLabelsForInputElement = function(element) {
    var labels = $();
    var id = element.id;

    if (element.labels) {
        return element.labels;
    }

    id && (labels = $("label[for='" + id  + "']")));

    labels = labels.add($(element).parents("label"));

    return labels;
};

답변

나는 당신이 완벽하게 할 수 있다는 것을 아무도 모른다는 것에 약간 놀랐습니다 .

<label>Put your stuff here: <input value="Stuff"></label>

어떤 제안 된 답변 중 하나에 의해 선택되지 않습니다,하지만 것입니다 올바르게 입력 레이블을 붙입니다.

이 경우를 고려하는 몇 가지 코드는 다음과 같습니다.

$.fn.getLabels = function() {
    return this.map(function() {
        var labels = $(this).parents('label');
        if (this.id) {
            labels.add('label[for="' + this.id + '"]');
        }
        return labels.get();
    });
};

용법:

$('#myfancyinput').getLabels();

몇 가지 참고 사항 :

  • 코드는 성능이 아닌 명확성을 위해 작성되었습니다. 더 성능이 좋은 대안을 사용할 수 있습니다.
  • 이 코드는 한 번에 여러 항목의 레이블을 가져 오는 것을 지원합니다. 그것이 당신이 원하는 것이 아니라면 필요에 따라 적응하십시오.
  • 이것은 aria-labelledby당신이 그것을 사용하는 것과 같은 것들을 여전히 처리하지 않습니다 (독자에게 연습으로 남겼습니다).
  • 여러 레이블을 사용하는 것은 서로 다른 사용자 에이전트 및 보조 기술을 지원할 때 까다로운 비즈니스이므로 잘 테스트하고 자신의 위험을 감수하여 사용하십시오.
  • 예, jQuery를 사용하지 않고이를 구현할 수도 있습니다. 🙂

답변

일찍이…

var labels = document.getElementsByTagName("LABEL"),
    lookup = {},
    i, label;

for (i = 0; i < labels.length; i++) {
    label = labels[i];
    if (document.getElementById(label.htmlFor)) {
        lookup[label.htmlFor] = label;
    }
}

나중…

var myLabel = lookup[myInput.id];

Snarky comment : 예, JQuery로도 할 수 있습니다. 🙂

답변

document.querySelector ( “label [for =”+ vHtmlInputElement.id + “]”);

이것은 가장 간단하고 간결한 방식으로 질문에 답합니다. 이것은 바닐라 자바 ​​스크립트를 사용하고 모든 메인 스트림 적절한 브라우저에서 작동합니다.

답변

jquery를 사용하면 다음과 같이 할 수 있습니다. 

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