jQuery - chọn phần tử nhãn liên quan của một trường nhập

Question

Tôi có một tập hợp các lĩnh vực đầu vào, một số trong số họ có nhãn liên kết, một số không:

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

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

<input ... /> 

như vậy, làm thế nào tôi có thể chọn nhãn liên quan đối với từng đầu vào, nếu nó tồn tại?

Answer 1

Bạn không nên dựa vào thứ tự các phần tử bằng cách sử dụng prev hoặc next. Chỉ cần sử dụng for thuộc tính của nhãn, vì nó phải tương ứng với ID của phần tử mà bạn đang thao tác:

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

Tuy nhiên, có một số trường hợp nhãn sẽ không có for bộ, trong trường hợp này nhãn sẽ là phụ huynh của điều khiển được liên kết của nó. Để tìm thấy trong cả hai trường hợp, bạn có thể sử dụng biến thể của những điều sau:

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

Tôi hy vọng điều này sẽ hữu ích!

Answer 2

Chừng nào và input và label của bạn yếu tố có liên quan bởi họ id và for thuộc tính, bạn sẽ có thể làm điều gì đó như thế này:

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

Nếu for không được thiết lập sau đó các yếu tố không có mối quan hệ ngữ nghĩa với nhau dù sao đi nữa, và không có lợi ích gì khi sử dụng thẻ nhãn trong trường hợp đó, vì vậy hy vọng bạn sẽ luôn có mối quan hệ được xác định.

Answer 3

Có hai cách để xác định nhãn cho các phần tử:

1. Setting nhãn của "cho" thuộc tính để id yếu tố của
2. Đặt yếu tố bên trong nhãn

Vì vậy, cách thích hợp để tìm phần tử nhãn là

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 
    }