jquery: why a selector returns me an array, but attribute doesnt?

Question

I'm trying to understand JQ better. I'm calling an JQ object

$(".FamiliesList li li span[class!='']").prev().find('option:selected')

this returns back to me an array of all the options that their span parent's brother has a classname.

[option, option]

Now- I want to return back an array of the option's values

$(".FamiliesList li li span[class!='']").prev().find('option:selected').attr('value')

this returns back to me only the first child value, and a full array of the values.

Why?

I would appreciate to receive help and understand jq better :)

Thanks.

It is indeed inconsistent that different methods work against single or multiple elements. This isn't the only inconsistency in the API. There's not much more to understand... if there is any understandable philosophy at work in jQuery's interface, it is merely “let's throw as many different features into $() as we possibly can, consistency be damned”. — bobince
– bobince, Commented Apr 15, 2010 at 13:43

Pointy · Accepted Answer · 2010-04-15 13:15:27Z

9

The best answer I can offer is, "that's just the way the API works". I agree with you that things like "attr" and "val" would be more consistent if they returned arrays (at least in the case that a selector matches multiple elements).

You can get that effect with $.map if you want:

var attrs = $.map($('div.something'), function(element) {
  return $(element).attr('whatever');
});

Now "attrs" will be an array. You could also write your own function.

In any case, it's important to note that there are arrays, and then there are "jQuery objects". It's never really going to make sense for "attr" or "val" (or anything like that) to be used in the middle of a set of jQuery operations, if you think about it.

answered Apr 15, 2010 at 13:15

Pointy

415k62 gold badges600 silver badges632 bronze badges

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

3 Comments

neoswf Over a year ago

Thank you and thanks everyone in this thread for answering me.

neoswf Over a year ago

Didn't get u man too much in ur last paragraph. Why it doesn't make sense? this returns back an object $(".FamiliesList li li span[class!='']"). its an attribute selector. why thats ok? after all I'm using jq to match DOM elements, isn't for that she was created?

Pointy Over a year ago

A "jQuery object" is a specialized array that supports all the jQuery functions, with the elements of the "array" part of the object being a set of matched DOM nodes. It doesn't really make sense, given the overall architecture of jQuery as it stands, to have a jQuery object where the array values are something like "attr" results.

user187291 · Accepted Answer · 2010-04-15 13:22:14Z

3

Actually, $(selector) does not return an array. The result of $(selector) is a jQuery object, which is defined as a "set of matched elements". This set can contain 0, one or more "elements", but jQuery itself remains a single object. Just a box that can hold nothing or something.

So, if $(...) doesn't return an array, what would be reason for attr() or val() to return it? That's why property getters always (?) return the properties of the first element in the jQuery object they are applied to.

answered Apr 15, 2010 at 13:22

user187291

54.1k19 gold badges98 silver badges127 bronze badges

1 Comment

neoswf Over a year ago

Got smarten here. I still think that the inconsistency is strange. if I can return an selector's object by its properties, why I cannot match by method? like attr() will return first child, but [attr=*] won't?

user35288 · Accepted Answer · 2010-04-15 13:14:00Z

1

try

$(".FamiliesList li li span[class!='']").prev().find('option:selected').each(function () { return $(this).attr('value'); });`

answered Apr 15, 2010 at 13:14

user35288

Comments

Nick Craver · Accepted Answer · 2010-04-15 13:15:56Z

1

You can do this using .map(), like this:

var values = $(".FamiliesList li li span[class!='']").prev()
               .find('option:selected').map(function(function() {
                 return $(this).attr('value');
               }).get();

This would get [value1, value2, value3], an array of the values of the selected options.

answered Apr 15, 2010 at 13:15

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Comments

Jeriko · Accepted Answer · 2010-04-15 13:15:19Z

0

Wouldn't you be looking for something like

$(".FamiliesList li li span[class!='']").prev().find('option:selected').each(function() {
  return this.attr('value');
});

Afaik, the attr() method doesn't work on multiple objects, so you'd need to call each() on the returned objects.

answered Apr 15, 2010 at 13:15

Jeriko

6,6474 gold badges30 silver badges40 bronze badges

2 Comments

Aaron McAdam Over a year ago

should be $(this) instead of this

Aaron McAdam Over a year ago

The shortcut method .val() should be mentioned here too

Collectives™ on Stack Overflow

jquery: why a selector returns me an array, but attribute doesnt?

5 Answers 5

3 Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related