Grow your CSS skills. Land your dream job.

Why this function doesn’t work in ‘for loop’ ? [jquery]

  • # March 10, 2013 at 5:30 am

    Hi , I m learning jquery and I m stuck at a point.
    Im creating a form and I want the fields to appear when the user focus on the input fields.
    http://codepen.io/sayed2x2/pen/urkhp
    The function is working fine, which is very simple

    $(‘#input1′).focus(function(){
    $(‘#row2′).show();
    });

    but I dont want to repeat the same code over and over again, so I wanted to use ‘for loop for it’. like this

    for(var j=1; j< =4; j++) {
    var k=j+1;

    $(‘#input’+j).focus(function(){
    $(‘#row’+k).show();
    });
    }

    But I have no idea why this isn’t working.
    can sombody please explain the reason?

    Thanks.

    # March 10, 2013 at 8:05 am

    do you want all the fields to appear once the user focuses on the first input or one by one?

    # March 10, 2013 at 8:40 am

    I want fields to appear one by one.

    # March 10, 2013 at 9:01 am

    if you watch your code after focusing on the first input the field that appears is the fifth one.thats because of the k var at the time of the code being executed.

    i came up with this which works

    for(var i=2; i< =5; i++ ){
    $(‘#row’+i).hide();
    }

    $(‘input’).focus(function(){
    var num = $(this).attr(‘id’).match(/d+$/)[0];
    $(‘#row’+(+num+1)).show();
    });

    # March 10, 2013 at 9:11 am

    Thanks a lot, but if you could explain a little more, i have a hard time understanding the reason you mention above. and why use pattern match?

    # March 10, 2013 at 9:19 am

    the $(‘#input’+j).focus() function registers event listeners for all the inputs 1-5 and runs on page load after that the k value remains 5, but the function inside .focus() runs once the first input gets focus.At that time it only enables the fifth row because of the k value.

    my code depends on getting the number after the #input to do that i used .match() that returns an array with each match. in our case is only one match so the first element is the number

    # March 10, 2013 at 9:45 am

    Today I learned a very basic essential thing of jquery from you, which I m sure will help me a long way understanding the logic. Now I understand why my code wasn’t working but im sorry for being dumb to understand your code.
    What I understand in $(this).attr(‘id’).match(/d+$/)[0] you are grabbing hold of the number which is coming under the attribute ‘id’ . but the regular expression (/d$/)) was enough to match the number then why did you use match(/d+$/)[0] and then why the first element of the array ‘[0]’.
    And then (+num+1). I m really sorry , im a beginner in jquery and it going from top of my head. I would be really thankfull to you if you explain it a little more.
    Again sorry for begin dumb.

    # March 10, 2013 at 9:52 am

    the .match() returns an array so to access the number we have to
    target it with brackets [] our match is the first so [0];

    with the + in the regular expression we are targeting all the numbers at the end of the string .the /d$/ on input45 would return 5.

    the + before num is typecasting for int in javascript.
    with num = 1;
    num+1 would return 11 as a string

    +num+1 would return the number 2

    # March 10, 2013 at 11:04 am

    Thank you very much , after experiment with your code 10 times. now I completley understand how its working and why you used those things. Today I learned a lot from you.
    Thanks again.

    # March 10, 2013 at 11:10 am

    im glad i helped

    # March 10, 2013 at 11:13 am

    just one last thing.
    I was experimenting and wrote this seprately

    k= 3;
    num= k+1;
    y= ‘row’+(num+1);
    alert(y);
    //returns row5

    So why in our case we are required to use (+num+1) or else it returns 11 as a string but doesn’t add the value ?

    # March 10, 2013 at 11:16 am

    the num of the inputs is taken from the match function which returns a string, so you dont have 2 for example but ‘2’ . with +’2′ the string ‘2’ becomes the number 2

    # March 10, 2013 at 11:18 am

    ok got it thank you, now no more doubts

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".