jQuery 如何查找具有特定属性及其值的标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10410074/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to find label with particular attribute and its value
提问by Basit
i have a page layout like this
我有一个这样的页面布局
<input id="name" class="mandotary" type="text">
<label for="name">Name must be entered</label>
<input id="code" class="mandotary" type="text">
<label for="code">Code must be entered</label>
Now i want to hide the label element when page load first. If it has lose the focus and value is null then label should be shown else label should be hidden. I tried this
现在我想在页面首先加载时隐藏标签元素。如果它失去了焦点并且值为空，则应显示标签，否则应隐藏标签。我试过这个
var inputElementArray = $("input.mandotary");
$.each(inputElementArray, function(index, element){
var id = $(element).attr("id");
var label = $("label").attr("for", id);
// label.hide();
$(element).focus(function(){
var next = $(element).next();
$(element).next().hide();
}); //end of focus()
$(element).blur(function(){
// get value of text area
var text = $(element).val();
if (text == "") {
var next = $(element).next();
$(element).next().show();
} //end of if
}); //end of blur()
}); //end of $(document).ready(fn)
But the line
但是线
var label = $("label").attr("for", id);
Give me both the labels. I just want that label whose for attribute value is id(name or code). I get the name or code as id in the var id. But it finds both the leabes. How can i find that label whose for attribute value is equal to my input element id?
给我两个标签。我只想要属性值为 id（名称或代码）的标签。我在var id 中得到名称或代码作为id。但它找到了两个 leabes。如何找到属性值等于我的输入元素 ID 的标签？
Thanks
谢谢
回答by gdoron is supporting Monica
var label = $('label[for="' + id + '"]');
// But it can be done simply with:
var label = $(element).next('label').attr("for", id);
Notes and best parctices:
注意事项和最佳实践：
Your code overuses jQuery for no good reason:
您的代码无缘无故地过度使用了 jQuery：
var id = $(element).attr("id");
// Can be simply:
var id = element.id;
And you can use the jQuery function eachthis way instead:
您可以这样使用 jQuery 函数each：
var inputElementArray = $("input.mandotary");
$.each(inputElementArray, function(index, element){
To be used on the direct elements:
用于直接元素：
$("input.mandotary").each(function(index, element){
//...
}):
回答by Zhelyo Hristov
You should serch for input or select right after the label and find it like this: $('#id of input or select').prev('label'); Example:
您应该在标签之后搜索输入或选择，然后像这样找到它： $('#id of input or select').prev('label'); 例子：
<label for="my_input">Text of label</label>
<input type="text" name="" id="my_input" value="" />
<script type="text/javascript">
var labelText = $('#my_input').prev('label').html();
</script>
回答by Gerardo Lima
The problem with your code is just the selector of the labels. You can improve your code further by "caching" the jQuery elements into enclosed variables not to run the selector for each time the functions are called.
您的代码的问题只是标签的选择器。您可以通过将 jQuery 元素“缓存”到封闭的变量中来进一步改进您的代码，以便在每次调用函数时不运行选择器。
var inputElementArray = $("input.mandotary");
$.each(inputElementArray, function(index, element){
// the local variables 'label' and 'input' are an enclosed
// references to the corresponding INPUT and LABEL jQuery objects
var input = $(element);
var label = $("label[for=" + input.attr("id") + "]");
label.hide();
input.focus(function() {
label.hide();
}); //end of focus()
input.blur(function(){
if(!input.val()) { label.show(); }
}); //end of blur()
}); //end of $(document).ready(fn)
