2011-01-30 49 views
84

我有一組輸入字段,其中一些有關聯的標籤,有的不是:jQuery的 - 選擇一個輸入字段的相關標籤元素

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

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

<input ... /> 

所以,我怎麼能選擇每個相關的標籤輸入,如果存在?

+0

他們總是會有`for`屬性集? – user113716 2011-01-30 18:23:55

+0

不,因爲一些朋友沒有標籤... – Alex 2011-01-30 18:25:57

+0

我認爲這就是你要找的東西http://stackoverflow.com/questions/1186416/jquery-selector-for-the-label-of-一個複選框:) – beon 2011-01-30 18:27:43

回答

156

您不應該通過使用prevnext來依賴元素的順序。只需使用標籤的for屬性,因爲它應該符合你當前正在操縱元素的ID:

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

然而,也有一些情況下,該標籤將不會有for集,在這種情況下,該標籤將是其關聯控件的父項。要找到它在這兩種情況下,您可以使用以下變化:

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

我希望這可以幫助!

13

只要和你inputlabel元素由其idfor屬性相關聯,你應該能夠做這樣的事情:

$('.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沒有設置那麼元素沒有語義關係無論如何都是相互關聯的,在這種情況下使用標籤標籤沒有任何好處,所以希望您永遠可以定義這種關係。

42

有兩種方式爲元素指定標籤:

  1. 設置標籤的「爲」屬性元素的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 
    } 
相關問題