loop through elements with jquery?

Question

i've never looped through elements with jquery and it would be great with some help.

my DOM looks like:

<div class="section">

    <div class="group">
        <div class="comment">
            <input class="comment" type="text" />
            <br />
        </div>
        <div class="link">
            <input class="link" type="text" />
            <input class="link" type="text" />
            <br />
        </div>
    </div>

    <div class="group">
        <div class="comment">
            <input class="comment" type="text" />
            <input class="comment" type="text" />
            <br />
        </div>
        <div class="link">
            <input class="link" type="text" />
            <br />
        </div>
    </div>

</div>

how do i write the code to get all values in text input fields (class=comment and class=link). there will be lot of groups with different numbers of text input fields.

thanks!

Answer 1

$(":input.comment, :input.link").each(function() {
    alert($(this).val()); // or this.val
});

See:

• http://docs.jquery.com/Utilities/jQuery.each
• http://docs.jquery.com/Selectors/input

Answer 2

This selects all elements with a class of comment or link, and alerts its value.

$(".comment, .link").each(function() {
    alert($(this).val());
});

Alternatively, you could select on the input type:

$("input[type='text']").each(function() {
    alert($(this).val());
});

Answer 3

The following syntax is clearer to me (although it's functionally equivalent to the other answers):

var elementList = $(":input.comment, :input.link");
$.each(elementList, function(i, input){
    alert($(input).val());
});