jQuery – Selector (div + variable)

[arkader]

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

[jamygolden]

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

[noahgelman]

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

[arkader]

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

[arkader]

here is a preview of the website :
http://www.notebookcom.net/haroun/index.html

[noahgelman]

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.

[arkader]

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

[noahgelman]

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

[arkader]

Thanks anyway :)
Anyone has any idea please ?

[jfreehill]

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.

[arkader]

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

[arkader]

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

[Author]

Posts