How To Get Or Find The Elements Values With Same Class Name In JQuery?

Suppose  we have a div with same class name multiple times or  one time only, and we want to get the values of the elements of that div. We can do this easily by using each()  and find() function of the JQuery.

Here is the example:

<div id="outerFrame">
<div class="elementFind">
   Username :<input type="text" name="username"/>
        Sex :<input type="radio" name="sex" value="Male">Maleinput>
</div>
<div class="elementFind">
   Username :<input type="text" name="username"/>
        Sex :<input type="radio" name="sex" value="Male">Maleinput>
</div>
<input type="button" value='Find' id='findElement'/>
</div>

JQuery code:

$(document).ready(function(){
$("#findElement").click(function () {

$('#outerFrame .elementFind').each(function() {
    var username = $(this).find('input:text[name=username]').val();
    var sex = $(this).find('input:radio[name=sex]').val();
    alert("Username : [" + username + "] Sex :[" + sex + "]");

});
});
});

The Above code will find the divs with class elementFind  using each() function  and then will find the elements using find() function.
Check live example here:

http://jsfiddle.net/jeetu_verma11/C4FWZ/

Share on Google Plus

About JK STACK

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.