假设我有一个html表单。每个输入/选择/文本区域都有一个对应的<label>
,其for
属性被设置为它的伙伴的id。在这种情况下,我知道每个输入将只有一个标签。
在javascript中给定一个input元素-例如,通过onkeyup事件-找到它的关联标签的最佳方法是什么?
发布于 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!';
不需要查找数组:)
发布于 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];
}
}
发布于 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;
};
https://stackoverflow.com/questions/285522
复制相似问题