PDA

View Full Version : Resolved jQuery loop functions



ggalan
05-12-2011, 02:34 PM
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
05-12-2011, 03:29 PM
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
05-12-2011, 07:02 PM
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
05-13-2011, 12:56 AM
<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
05-13-2011, 03:07 PM
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
05-13-2011, 03:10 PM
I said if. I don't know why you're looping them. Why are you looping them?

ggalan
05-13-2011, 03:35 PM
looping them to clean up redundant code, aiming for best practices.

jscheuer1
05-13-2011, 04:51 PM
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
09-18-2011, 03:55 PM
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
09-18-2011, 06:26 PM
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: ''});
});

ggalan
09-18-2011, 06:55 PM
It's generally better not to loop if there's a more direct way.
so you would prefer this


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

as opposed to this?


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

jscheuer1
09-18-2011, 07:15 PM
No it use repetitive code, worse than a loop. I might prefer something like:


$('.customfile-input').click(function(){
$(this).parent().find('input[type=submit]').show();
});

But it traverses each time one of them is clicked, as do the other alternatives I offered, except perhaps:


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

Which is a lookup in an existing object. The loop traverses twice, once to gather the file input buttons (they all do that) and a second time to loop them to set it up. After that it's a direct click event. You would have to time them to see, but I suspect the loop is better in most cases.

BTW .show() is the same as .show(0). Using .css({display: ''}) in this case is maybe more direct. But it's more specific and would fail if say the display: none of the submit buttons was set in a stylesheet. One could do:


.css({display: 'inline'})

ggalan
09-18-2011, 07:32 PM
doesnt seem to show the submit item


$('.customfile-input').click(function(){
$(this).parent().find('input[type=submit]').show();
});


this works perfectly tho


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

jscheuer1
09-18-2011, 07:49 PM
Works fine for me:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('.customfile-input').click(function(){
$(this).parent().find('input[type=submit]').show();
});
});
</script>
</head>
<body>
<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>
</body>
</html>

Great too if you don't have id's for the submit buttons and don't know where each is in relation to the file input. But if those are not issues I'd go with the loop, or:


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