Marcus McLean Marcus McLean - 1 year ago 70
Javascript Question

Cannot get attributes, period, in jQuery

I'm simply trying to select the ID of these particular "sides". I've done it a million times but jQuery just simply doesn't want to cooperate with me.

$( 'input[name="fd-border"]' ).change(function() {
var border = [];
var sides = $( 'input[name="fd-border"]' );
var length = sides.length;
if ( length == 0 ) {
border = [ 'top', 'bottom', 'left', 'right' ];
} else {
for ( i = 0; i < length; ++i ) {
border.push( sides[i].val() );

The above query returns the following array:

<input type=​"checkbox" id=​"fd-border-top" name=​"fd-border" value=​"top" class=​"ui-helper-hidden-accessible">​,
<input type=​"checkbox" id=​"fd-border-bottom" name=​"fd-border" value=​"bottom" class=​"ui-helper-hidden-accessible">​,
<input type=​"checkbox" id=​"fd-border-left" name=​"fd-border" value=​"left" class=​"ui-helper-hidden-accessible">​,
<input type=​"checkbox" id=​"fd-border-right" name=​"fd-border" value=​"right" class=​"ui-helper-hidden-accessible">​

I just keep getting
TypeError: 'undefined' is not a function (evaluating 'sides[i].val()')
. It doesn't matter if I want to use
, or
.attr( 'id' )
, or any attribute for that matter. I get the same error, and it's only happening here. Any idea why?

Answer Source

You need to use

border.push( $(sides[i]).val() );

because sides[i] gives a dom reference which does not have methods like .val() or .attr(), you need to get the corresponding jQuery object by wrapping it using $(sides[i])

Instead of the for loop I may use .map()

border =, el){
    return $(el).val()