jQuery - 选择输入字段的关联标签元素[重复]答案

【问题标题】：jQuery - select the associated label element of a input field [duplicate]jQuery - 选择输入字段的关联标签元素[重复]
【发布时间】：2011-06-18 04:37:17
【问题描述】：

我有一组输入字段，其中一些有关联的标签，一些没有：

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

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

<input ... />

那么，如果存在，我如何为每个输入选择关联的标签？

【问题讨论】：

他们是否总是设置for 属性？
不，因为有些字段没有标签...
我想这就是你要找的东西stackoverflow.com/questions/1186416/… :)
我的意思是如果有一个输入有标签，标签是否总是有for 属性集。自然，如果没有标签，就没有for 属性。 :o)

标签： javascript jquery forms

【解决方案1】：

您不应该使用prev 或next 来依赖元素的顺序。只需使用标签的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;
    }
}

我希望这会有所帮助！

【讨论】：

-1 用于搜索父标签标签的笨拙方式。此外，可能不是元素的直接父级。查看我的解决方案。

【解决方案2】：

为元素指定标签有两种方式：

将标签的“for”属性设置为元素的id
在标签内放置元素

所以，找到元素标签的正确方法是

   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
   }

【讨论】：

【解决方案3】：

只要您的 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 没有设置，那么元素之间就没有语义关系，并且在这种情况下使用标签标签没有任何好处，所以希望你总是定义这种关系。

【讨论】：

除了“for”属性外，还可以通过输入元素在标签内建立语义关系——见Maxim Kulkin的回答
你混淆了php和javascript中的定义和使用变量