can we use a .each within a .each in jquery?

Question

$("[name=form_1]").each(function(){
    alert("i in else"+i);
    $('.eform_text').each(function() {
    });
});

would this loop iterate over all elements that have a class of eform_text only in form1 .Or would it iterate over all elements which have that class ?

Update:

The exact jsp code is as follows:

<c:when test="${eformDetails.controlType==1}"> <input id="textBox_${eformDetails.id}_${eformDetails.required}_${i}" class="eformDetail eform_text" type="text" value="" name="form_${i}" onblur="validateEformInputs(${i-1})"></input> </c:when>

i have the form which varies each time.and for each form i need to obtain all the text boxes.Currently after your help my javascript is ass follows:

$("[name=form_"+i+"]").each(function(i){ alert("i in else"+i);

         $('.eform_text', this).each(function() {
        textboxId = $(this).attr("id");

It reaches the first alert but i am not able to reach the second loop.It is not obtaining elements that have class eform_text.Not sure what is going wrong here.Could you please help?

Solution 1

It would iterate over all elements with that class, whether inside a form with the name "form_1" or not. To only look within each form (I'm guessing you must have more than one form with the name "form_1", though that seems odd), use find in the outer loop in order to scope the inner loop:

$("[name=form_1]").each(function(formIndex) {
    alert("formIndex in each: " + formIndex);
    $(this).find('.eform_text').each(function(textIndex) {
        alert("textIndex in each: " + textIndex);
    });
});

Or you can use the second argument to $(), which provides the context in which to work:

$("[name=form_1]").each(function(formIndex) {
    alert("formIndex in each: " + formIndex);
    $('.eform_text', this).each(function(textIndex) {
        alert("textIndex in each: " + textIndex);
    });
});

Either should work.

Note that as @Shrikant Sharat pointed out in the comments (thanks Shrikant!), I've assumed the i in your original code is meant to be the index that gets passed into each. I've shown the indexes at both levels (with descriptive names) above.

Solution 2

Your second answer.

Because you're calling $( each time, it instantiates a new copy of the jQuery object which doesn't care what level of a function it's in.

It would loop through every element with that class.

Comments

[sharat87]

I think you forgot taking the i argument in the function given to the outer .each. Sorry, couldn't help but point out :)

[T.J. Crowder]

@Shrikant: Thanks. Well, I didn't, I just copied the OP's code. :-) So I don't know that the i is meant to be from each (but I think the odds have to be about 99.9% that you're right, it is...). I've updated to clarify, thanks again.

[sharat87]

ah, I see. Didn't notice in the question for some reason

[user735566]

Hi,thank you for your prompt replies.Let me explain the problem in detail:

[Adi Inbar]

I don't see how a code snippet by itself can answer the question, since he didn't ask how to do something, he asked for an explanation. In general, it's a good idea to include some explanation of what your code does and how it answers the question or resolves the problem.