jQuery Loop Question

Question

I have a quick question re. the most efficient way to loop through multiple divs and the input /textarea's in those divs.

For example, I have the following HTML

    <div class="formatInput">
        <h4>Section Header</h4>
        <input type="text" class="formatSectionHeader" width="100%"/>
        <h4>Section Content</h4>
        <textarea class="formatSectionContent"></textarea>
        <p style="float:right;"><span class="removeFormatInput">Remove Section</span></p>
    </div>

I made a button that will allow the user to add more .formatInput divs if needed.

At the end of it I have a refresh button that I want to loop through each div and gather the values of the input and textarea controls in order.

zwippie · Accepted Answer · 2010-08-06 07:05:59Z

1

Loop over divs and then form elements:

$('.formatInput').each(function(index) {
  $(':input', this).each(function(index2)) {
    alert(index + '-' + index2 ': ' + $(this).value());
  });
});

answered Aug 6, 2010 at 7:05

zwippie

15.6k3 gold badges44 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Reigel Gallarde · Accepted Answer · 2010-08-06 07:04:34Z

1

if you call $(".formatInput") it will give you all the divs with the class formatInput. Traverse it using .each().

$(".formatInput").each(function(){
   // $(this) here will be the current div in the loop.
});

answered Aug 6, 2010 at 7:04

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

Comments

Andy Gaskell · Accepted Answer · 2010-08-06 07:12:11Z

1

One thing worth at least mentioning is that you might be looking for serialize, although I can't say for sure. The reason I say this is because of this wording.

loop through each div and gather the values of the input and textarea controls in order

Like I said though, maybe you really are just looking for a couple of each calls.

answered Aug 6, 2010 at 7:12

Andy Gaskell

31.8k6 gold badges79 silver badges84 bronze badges

Comments

Sarfraz · Accepted Answer · 2010-08-06 07:19:09Z

0

You can use each to loop through all the fields inside your div like this:

$('.formatInput :input').each(function() {
    alert($(this).value());
});

The :input filter selects will select all inputs (in your case input type text and textarea) which are inside the div with class formatInput and then each is used to loop over them.

answered Aug 6, 2010 at 7:19

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Comments

Nick Hagianis · Accepted Answer · 2010-08-06 08:12:50Z

0

The following would create two separate arrays. Really depends on what you'll be doing with the data as to how you'd want to format it. jAndy hit it right on the head but I can't vote yet.

var header = new Array();
var content = new Array();

$(".formatInput").each(function(){
    iDex = $(this).index();
    header[iDex] = $(this).children(".formatSectionHeader").val();
    content[iDex] = $(this).children(".formatSectionContent").val();
});

answered Aug 6, 2010 at 8:12

Nick Hagianis

1,4661 gold badge14 silver badges20 bronze badges

Collectives™ on Stack Overflow

jQuery Loop Question

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related