How to get the class of an input inside a jQuery each loop?

Question

I have function which appends inputs inside a list item when a link is clicked. I then loop through these inputs using an each loop using the code below. It is working correctly as shown, however instead of using field.name I want to use the class of the input as the array key but when i try to do this the class is shown as undefined.

Here is the code I am currently using:

var values = {};
$.each($('li :input').serializeArray(), function(i, field) {
    values[field.name] = field.value;
});

Here is the code I have inside the list item once I have appended the hidden inputs using jQuery append:

<li><input type="hidden" name="group" class="group" value="2"/><input type="hidden" name="condition" class="condition" value="isany"/><input type="hidden" name="value" class="value" value="1,2"/></li>

I can get the name attribute fine but class is always undefined.

Could anybody help with this?

how're you trying to get the classname?

Gonzalo Larralde
– Gonzalo Larralde

2011-03-09 23:44:19 +00:00
Commented Mar 9, 2011 at 23:44 — Gonzalo Larralde
– Gonzalo Larralde, Commented Mar 9, 2011 at 23:44

jcubic · Accepted Answer · 2011-03-10 00:19:54Z

5

try:

var values = {};
$('li :input').each(function() {
    values[$(this).attr('name')] = $(this).val();
});

This work when I tested.

var values = {};
$('li input').each(function() {
    values[$(this).attr('class')] = $(this).val();
});
alert(JSON.stringify(values));

edited Mar 10, 2011 at 0:19

answered Mar 9, 2011 at 23:45

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

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

3 Comments

Patrick Fisher Over a year ago

values[$(this).attr('class')] = $(this).val();

Paul Atkins Over a year ago

Hi, I tried this code and it works for the name attribute but when i try for class attribute which is what I want then it still returns class as undefined

Paul Atkins Over a year ago

Hi, here is what i have appended inside the list item:

<li><input type="hidden" name="group" class="group" value="2"/><input type="hidden" name="condition" class="condition" value="isany"/><input type="hidden" name="value" class="value" value="1,2"/></li>

I can get the name attribute but not the class

chriscauley · Accepted Answer · 2011-03-10 00:17:13Z

1

I can't figure out how to get it to work with $.serializeArray, but this works. (change console.log to $("body").append if you don't have a console).

$.each($('input'),function(){console.log(this.className)})

Note that you use the native javascript this rather than the jquery object $(this)

answered Mar 10, 2011 at 0:17

chriscauley

21.5k10 gold badges35 silver badges34 bronze badges

Comments

RobertoBr · Accepted Answer · 2011-03-10 00:19:54Z

0

var values = {};
$.each($('li :input').serializeArray(), function(i, field) {
    values[$(field).attr('class')] = field.value;
});

answered Mar 10, 2011 at 0:19

RobertoBr

1,80113 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to get the class of an input inside a jQuery each loop?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related