查找与给定输入相关联的html标签
查找与给定输入相关联的html标签
提问于 2008-11-12 21:55:10
假设我有一个html表单。每个输入/选择/文本区域都有一个对应的<label>，其for属性被设置为它的伙伴的id。在这种情况下，我知道每个输入将只有一个标签。
在javascript中给定一个input元素-例如，通过onkeyup事件-找到它的关联标签的最佳方法是什么？
回答 18
Stack Overflow用户
回答已采纳
发布于 2008-11-12 22:24:06
首先，扫描页面中的标签，并从实际的表单元素中为标签分配一个引用：
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!';不需要查找数组:)
Stack Overflow用户
发布于 2008-11-12 22:12:13
如果你使用的是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];
}
}Stack Overflow用户
发布于 2013-02-25 14:16:12
HTML5 standard中有一个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;
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/285522
复制相关文章
相似问题