How to find label with particular attribute and its value

Question

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?

Thanks

You might want to read this: [Is there any specific reason behind using $ with variable in jQuery](http://stackoverflow.com/a/10204647/601179) — gdoron, May 02 '12 at 09:01

score 21 · Accepted Answer · edited Nov 11 '18 at 08:03

21

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:

var id = $(element).attr("id");
// Can be simply:
var id = element.id;

And you can use the jQuery function each this way instead:

var inputElementArray = $("input.mandotary");
$.each(inputElementArray, function(index, element){

To be used on the direct elements:

$("input.mandotary").each(function(index, element){
    //...
}):

edited Nov 11 '18 at 08:03

Electrox Mortem

319
2
15

answered May 02 '12 at 08:21

gdoron

147,333
58
291
367

This needs a closing square bracket. – Jon Egerton May 02 '12 at 08:22
@JonEgerton. Embarrassing... fixed it, thanks for notify me! :) – gdoron May 02 '12 at 08:28
nps - +1 for getting there first. – Jon Egerton May 02 '12 at 08:43
Hi thanks, but i want to ask why the syntax is like `var label = $('label[for="' + id + '"]').attr("for", id);`. Why not just`$('label[for="' + id + '"]')`. It means find label whose for attribute has value id. Why we are appending `.attr("for", id)` . Thanks – Basit May 02 '12 at 08:52
@Basit. You can remove it if you like, it is your code... I just copied it – gdoron May 02 '12 at 09:00
Thanks:) But as you said i can use this `$("input.mandotary").each()` instead of `var inputElementArray = $("input.mandotary"); $.each(inputElementArray, function(index, element){`. Means first declare variable and then use it in .each(). I want to ask is it effect the code performance? Like i am simply storing result in variable and then using variable in .each(). What is the difference in code performance by using `$("input.mandotary").each()` Thanks – Basit May 02 '12 at 09:12
@Basit. Basically it has almost the same effect, my option **should** be **little** faster and consume less memory. But the real reason I suggested it is because it is cleaner code this way. – gdoron May 02 '12 at 09:15
Code over use or keeping the code similar? It is a disconcerting to see jumps from one type of code to another too often, it causes cognitive dissonance of making mistakes to mix the two e.g. "var id = $(element).id;" etc. is there a way to keep the code uniformity? e.g. I try to do all the Jqury fiding of the elements in one block and from that point onwards only try to use the variables. Any advice on coding practices please? – jimjim Feb 09 '17 at 01:04
1

@Arjang I honestly have no idea what you're talking about or asking. You might want to open a new question if you have one. You can link it here if you want my input, though there will be tons who can assist you. – gdoron Feb 09 '17 at 09:33

score 0 · Answer 2 · answered May 02 '12 at 08:36

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.

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)

To whoever marked this answer not useful: I would appreciate to know your reasons; did you find a bug? — Gerardo Lima, Jan 18 '18 at 15:22

score 0 · Answer 3 · answered Apr 06 '16 at 16:01

You should serch for input or select right after the label and find it like this: $('#id of input or select').prev('label'); Example:

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

How to find label with particular attribute and its value

3 Answers3