jQuery loop functions

[ggalan]

can anyone lend a hand looping these functions, i have about 10 of them

$("a.ques_1a").click(function(){
	$('#targetDiv').load('ques/ques1_ans/ans1.php');
	tTitle = "consumer reason";
	step_2();
});
$("a.ques_1b").click(function(){
	$('#targetDiv').load('ques/ques1_ans/ans2.php');
	tTitle = "other thoughts";
	step_2();
});
$("a.ques_1c").click(function(){
	$('#targetDiv').load('ques/ques1_ans/ans3.php');
	tTitle = "feedback";
	step_2();
});

[jscheuer1]

I would question your markup. The use of class here seems wasted. It appears as though each is unique, so id would be a better choice. Then you could give them all one unifying class and make a single click function for that class that goes through each id and does the appropriate thing.

Or, once converted both the markup and the existing functions to id's, and adding the class - say 'quests', to do all of them at once:

$('.quests').each(function(){
		$(this).click();
	});

Or, if you want a delay between each execution, you could do something like:

function loopQuest(){
	$('.quests').each(function(i){
		if(loopQuest.counter++ === i){
			$(this).click();
			if(loopQuest.counter < $('.quests').size()){
				setTimeout(loopQuest, 1000);
			} else {
				loopQuest.counter = 0;
			}
			return false;
		}
	});
}
loopQuest.counter = 0;

Additionally, though not required for this, you probably could make just one function for all ten clicks and use the id (formerly the class) or other data associated with each element to tell the click function what to do visa vis:

	$('#targetDiv').load('ques/ques1_ans/ans1.php');
	tTitle = "consumer reason";

Like if ans1.php were ansa.php and so on, you could parse the id to find:

ques/ques1_ans/ansa.php

ques/ques1_ans/ansb.php

etc.

The tTitle could be stored as each element's data-tTitle attribute or data property.

[ggalan]

so you're saying that this is no good

<ul>
	<li><a class="ques_1a">some text here</a></li>
	<li><a class="ques_1b">some text here</a></li>
	<li><a class="ques_1c">some text here</a></li>
</ul>

but to replace those unique class with a unified class called .quests?

<ul>
	<li><a class="quests">some text here</a></li>
	<li><a class="quests">some text here</a></li>
	<li><a class="quests">some text here</a></li>
</ul>

then how would i get unique values from each one?

[jscheuer1]

<ul>
	<li><a class="quests" id="ques_1a">some text here</a></li>
	<li><a class="quests" id="ques_1b">some text here</a></li>
	<li><a class="quests" id="ques_1c">some text here</a></li>
</ul>

Then use the id in your code that needs to distinguish between/single out individual elements (li's in this case) and use the class when you want to do something with all of them.

That's what class and id have always been intended for. An id is a unique identifier, while a class indicates two or more things that share one or more things in common.

The two are often confused, and often this is not a problem. However, if this general way of looking at class and id is ignored, it can cause problems when scripting. More importantly, once you get used to and follow the concept, it offers you a tool to more easily organize your markup, styles and scripts.

[ggalan]

if you want a delay between each execution, you could do something like:

why would you delay each execution? i guess im missing the logic in this

[jscheuer1]

I said if. I don't know why you're looping them. Why are you looping them?

[ggalan]

looping them to clean up redundant code, aiming for best practices.

[jscheuer1]

Well, if you want them to happen all at once, then don't use the version with the timeout.

I was just thinking though, since they all appear to write to $('#targetDiv'), and I assume that's overwrite to, you might want a delay between execution so that one set of information could be seen before it gets replaced by the next set of information and so on. I may have misunderstood that part.

[ggalan]

heres a continuation from a previous post, if i have several of these forms generated from php like this

<FORM id='upload_0' class='upload' action='upload.php' enctype='multipart/form-data' method='post'>
	<input type='hidden' name='MAX_FILE_SIZE' value='1048576'>
	<input id='file0' type='file' name='uploadedfile' class='customfile-input'>
	<input id='submit0' type='submit' name='submit' value='' class='upload' style='display:none;'>
</FORM>
<FORM id='upload_1' class='upload' action='upload.php' enctype='multipart/form-data' method='post'>
	<input type='hidden' name='MAX_FILE_SIZE' value='1048576'>
	<input id='file1' type='file' name='uploadedfile' class='customfile-input'>
	<input id='submit1' type='submit' name='submit' value='' class='upload' style='display:none;'>
</FORM>
<FORM id='upload_2' class='upload' action='upload.php' enctype='multipart/form-data' method='post'>
	<input type='hidden' name='MAX_FILE_SIZE' value='1048576'>
	<input id='file2' type='file' name='uploadedfile' class='customfile-input'>
	<input id='submit2' type='submit' name='submit' value='' class='upload' style='display:none;'>
</FORM>

and my jQuery functions look like this

$('#file0').click(function(){
	$('#submit0').show(0);
});
$('#file1').click(function(){
	$('#submit1').show(0);
});
$('#file2').click(function(){
	$('#submit2').show(0);
});

how can i loop the code to make it more condense?
heres my attempt. the index doesnt seem correct

$('.customfile-input').each(function(index) {
	$('#submit' + index ).show(0);
});

[jscheuer1]

It's generally better not to loop if there's a more direct way. In this case I'm not sure. But the each function in your post doesn't assign the click event. It could like so:

	$('.customfile-input').each(function(index) {
		$(this).click(function(){$('#submit' + index ).show(0);});
	});

This also works, no loop:

	var fputs = $('.customfile-input').click(function(){
		$('#submit' + fputs.index(this)).css({display: ''});
	});

Or, given the layout:

	$('.customfile-input').click(function(){
		$(this).next().css({display: ''});
	});