Jquery: loop iteration

Question

Not sure if it's actually iterating once, but only one dialog is being generated. the jquery loop is aimed at a hidden input for each PHP loop iteration which counts up from one; There's two 'roomID' total.

Using alert gives me two, but it is not assigning the dialog with jquery, which in return gives me the first one. Why is this happening?

Is there a better method of doing this:

$('input#roomID').each(function() {
   var roomID = $('input#roomID').val();
   alert($(this).val());

            $( 'div.edit-dialog-'+roomID ).dialog({ 
                autoOpen: false,
                height: 500,
                width: 550,
                modal: true,
                position:['middle','middle'],
                draggable: true,
                //resizable: true,
                buttons: {
                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                },
                    close: function() {
                        allFields.val( "" ).removeClass( "ui-state-error" );
                    }
            });

            $( 'a.room-edit-'+roomID).click(function() {
                $( 'div.edit-dialog-'+roomID ).dialog( "open" );
            });
    });

I'm somewhat new to Jquery.

u can not have more than one dom element for this input#roomID selection. — Elbek
– Elbek, Commented Feb 12, 2013 at 2:05

dennmat · Accepted Answer · 2013-02-12 02:19:18Z

You're selecting on an id '#'.

Dom's require unique id's.

Try making it a class instead.

So instead of

<input id="roomID" type="text" />

Add a class

<input class="roomID" type="text" />

Then

$('input.roomID').each();

will select all of the inputs on the page with the class roomID

EDIT

jQuery's each function will go through the selectors matches. So say you have this HTML:

<input class="hello" />
<input class="hello" />
<span class="hello">text</span>

Then when you call each like this:

$('.hello').each(function(i, ele){});

jQuery will call the function 3 times each time the function will have this(or will be scoped) to the individual dom elements. It does this in the order they appear in the dom. So the first time through it will be input then input then span.

Each time this will point to the respective dom element and not a jQuery mapped element. that's why you need to do $(this) to access jquery's helper methods as opposed to just this.val().

It also calls the function with 2 arguments, the first is the iteration number, so on the span case this would be 2. And the second is the element again.

You'll also need to update your line var roomID = $('input#roomID').val(); to $(this).val().
OOO! That did it! That makes perfect sense too. As I'm a newbie to jquery, but understand loops well from PHP... my assumption is by using the specific 'input#roomID', it grabs the first, instead of $(this) which changes with each iteration ? <3

Jeromy French · Accepted Answer · 2013-02-12 21:47:31Z

0

This is much better if you use another selector to customize the inputs.

 <input name="new3" />
 <input name="new2" />
 <input name="new1" />

 <script>
     $('input[name*="new"]').val('xxxxx');
 </script>

edited Feb 12, 2013 at 21:47

Jeromy French

12.1k19 gold badges79 silver badges136 bronze badges

answered Feb 12, 2013 at 2:12

AURIGADL

2,0922 gold badges15 silver badges15 bronze badges

Collectives™ on Stack Overflow

Jquery: loop iteration

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related