Grow your CSS skills. Land your dream job.

jQuery – Selector (div + variable)

  • # November 9, 2010 at 5:48 pm

    Hi Everyone, here is my issue
    I would like to use a variable and div within a jQuery selector
    I’m a traversing a loop to select severals div (i have 10 div)
    but jQuery does not understand my synthax

    May someone help me please :)
    Best regard

    $(function(){

    for (var iter = 0; iter<10; iter++){

    var container =$('#box'+iter);
    var colour = $('#overlay'+iter);
    var content = $('#hover'+iter);

    }//end for

    }//end Jquery
    # November 10, 2010 at 4:55 pm

    It should be targeting those divs. Only problem is that you aren’t actually doing anything to them :p
    Something like this should give you a visible outcome:

    $(function(){

    for (var iter = 0; iter<7; iter++){

    var container =$('#box'+iter);
    var colour = $('#overlay'+iter);

    container.text(iter);
    colour.text(iter + iter);

    }//end for

    }//end Jquery
    # November 10, 2010 at 7:34 pm

    Yes, I see you listed variables, but you haven’t said to do anything with them

    # November 11, 2010 at 2:42 pm

    Thanks for your answers,

    I would like to produce this effect on several divs
    http://www.hv-designs.co.uk/2010/10/20/jquery-slide-effect/

    Unfortunately, i only see the div #overlay, the #hover does not work :(

    here is the rest of the code

    $(function(){

    for (var iter = 2; iter<10; iter++){

    var container =$('#box'+iter);
    var colour = $('#overlay'+iter);
    var content = $('#hover'+iter);


    content.hide();
    colour.hide();

    container.hover(function(){
    content.stop().show().css({'left':'-310px'}).animate({left:0},300);
    colour.stop().fadeTo(500, .7)
    }
    ,function(){
    content.stop().animate({left:310},300);
    colour.stop().fadeTo(500, 0)
    });

    }//end for


    });//end jQuery
    # November 11, 2010 at 2:51 pm

    here is a preview of the website :

    http://www.notebookcom.net/haroun/index.html

    # November 11, 2010 at 6:17 pm

    Normally that would work. But since you have those variables it gets a bit more complicated. Because you add a number on the end you have to add a bit more to the second half of your code. Where you actually do the hover option, you haven’t specified which value the hover should work for.

    To rephrase, when you hover #box3, how does it know that the ‘content’ and ‘colour’ you’re targeting is #overlay3 and #hover3? You’re assuming the code knows that ‘content’ and ‘colour’ should have the value of 3 on the end as well but you haven’t told it to so when you hover a box, it doesn’t know what element you’re targeting and so it does nothing.

    # November 11, 2010 at 8:42 pm

    thank you for your help noahgelman,
    but how do I do to make it right ?

    If you have a easier way to achieve this, let me know :)

    # November 12, 2010 at 12:07 am

    Not sure how to fix it, lol. Sorry. Maybe one of the mods will know.

    # November 14, 2010 at 7:40 am

    Thanks anyway :)
    Anyone has any idea please ?

    # November 14, 2010 at 1:07 pm

    Have you used a javascript debugger? First off, it would be best to check if the variables are even grabbing an element using that syntax. I would test this by removing the for loop and give ‘iter’ a set number. Then use the Firebug debug console to check those variables, container, content, ect. Just type in one of the variable names in the bottom.

    I’m guessing jQuery just isnt seeing it as a string when you do it like that. I haven’t tested this but it might work if you first convert the “iter” variable to a string, concatenate it then pass it in to the jQuery selector.

    So like this:

    var container = $('#box' + iter.toString());

    or

    var iterString = iter.toString();
    var container = $('#box' + iterString);

    or the longest way (more likely to work):

    var iterString = iter.toString();
    var containString = "#box" + iterString;
    var container = $(containString);

    And do those last two for each div ID. I’d like to hear if this works.

    # November 14, 2010 at 8:18 pm

    Hi jfreehill
    thanks for your help;

    Indeed, you were right about the strings, and your method (the longest way) works.
    Nonetheless, i have an issue in my loop
    As noahgelman said, i loop through the boxes (div #box) but only the last one is selected.
    When i hover a div (for instance #box3 or #box5, the slide effect only apply the latest #box, instead of his proper #box)

    here you can see a preview : http://notebookcom.net/haroun/index.html

    # November 14, 2010 at 8:58 pm

    Thanks a lot jfreehill and noahgelman !
    I am very gratefull :)

    I have used the each function loop
    and it works great :)

    preview here :http://notebookcom.net/haroun/index.html

    $(function(){
    $(‘.boxDef’).each(function(index){

    //var index = $(“div”).index(this);
    var index = index + 3; //on ajoute 3 car on commence a #box3
    var iterstring = index.toString();
    //alert(index + ‘ ‘ + $(this).text());

    var containerstring = “#box” + iterstring;alert(containerstring );
    var container = $(containerstring);

    var colourstring = “#overlay” + iterstring;alert(colourstring);
    var colour = $(colourstring);

    var contentstring = “#hover” + iterstring;alert(contentstring);
    var content = $(contentstring);
    content.hide();
    colour.hide();

    container.hover(function(){
    content.stop().show().css({‘left':’-310px’}).animate({left:0},300);
    colour.stop().fadeTo(500, .7)
    }
    ,function(){
    content.stop().animate({left:310},300);
    colour.stop().fadeTo(500, 0)
    });

    })
    })//end jQuery

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

You must be logged in to reply to this topic.

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