jQuery selector for multiple elements

Question

I know this isn't a code issue related question, but it's something I'd love to know and it may help others:

What's the difference between using this:

$(function() {
    var $fullArea = $('#full-sized-area');
    var $fullContent = $('#full-sized-content', $fullArea);
});

Over say this:

$(function() {
    var $fullArea = $('#full-sized-area');
    var $fullContent = $('#full-sized-content, #full-sized-area');
});

Generally the 2 codes are totally different. The first selects just 1 element having id #full-sized-content under the element $fullArea, so if that element is not contained in $fullArea, you receive an empty jquery object. While the second always returns 2 objects of #full-sized-content and #full-sized-area. Of course those ids should exist in the HTML code. — King King
– King King, Commented Jun 18, 2014 at 11:39

Satpal · Accepted Answer · 2014-06-18 11:38:19Z

2

Both are quite difference.

Basically you are using Multiple Selector (“selector1, selector2, selectorN”) in the following line. So its simple

$('#full-sized-content, #full-sized-area')

Where as in line you are using context based selector, Here you are selecting element with ID full-sized-content in childs of $fullArea

var $fullContent = $('#full-sized-content', $fullArea);

is equivalent to

var $fullContent = $('#full-sized-area').find('#full-sized-content');

Note As IDs must be unique in HTML you can simply use

var $fullContent = $('#full-sized-content');

answered Jun 18, 2014 at 11:38

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

Comments

Shaunak D · Accepted Answer · 2014-06-18 11:44:12Z

1

There is a difference,

Demo : Multiple selector

var $fullContent = $('#full-sized-content, #full-sized-area');

Selects both the elements - Multiple selector: $('#elem1,#elem2,...')

Demo: Parent-child

var $fullContent = $('#full-sized-content', $fullArea);

In this case : #full-sized-content has to the child of #full-sized-area

So its is equivalent to

$('#full-sized-area #full-sized-content');
          Parent          Child

edited Jun 18, 2014 at 11:44

answered Jun 18, 2014 at 11:38

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

Comments

K.K.Agarwal · Accepted Answer · 2014-06-18 11:39:23Z

1

Both are diffent here..

$(function() {
    var $fullArea = $('#full-sized-area');
    var $fullContent = $('#full-sized-content', $fullArea);
});

This one select element which has id "full-sized-content" under the #full-sized-area element

$(function() {
    var $fullArea = $('#full-sized-area');
    var $fullContent = $('#full-sized-content, #full-sized-area');
});

This one select both element with the ID full-sized-content and full-sized-area

answered Jun 18, 2014 at 11:39

K.K.Agarwal

8565 silver badges10 bronze badges

Comments

palaѕн · Accepted Answer · 2014-06-18 11:48:39Z

1

var $fullContent = $('#full-sized-content', $fullArea);

The above actually a context based selector. So, what is does in simple manner is:-

$fullArea                           // get the fullArea element
    .find('#full-sized-content')    // find all the descendants with this id inside it

While the code below means:

// Get both the elements with id full-sized-content & full-sized-area
var $fullContent = $('#full-sized-content, #full-sized-area');

It's like a combined selector. So, if you do the below thing for 1st code:-

$fullContent.css('color', 'red');

It will only make the color red for the element #full-sized-content inside $fullArea Whereas if you use the same code for the 2nd part, it will color both the full-sized-content & full-sized-area elements.

FIDDLE DEMO

edited Jun 18, 2014 at 11:48

answered Jun 18, 2014 at 11:40

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Comments

Jai · Accepted Answer · 2014-06-18 11:45:52Z

0

Your code:

var $fullContent = $('#full-sized-content', $fullArea);

it says find me #full-sized-content in $fullArea, because of the ,. , makes a context for this.

This code:

var $fullContent = $('#full-sized-content, #full-sized-area');

is usually called a muliple selector selection which is a string with , separated elems while below

var $fullContent = $('#full-sized-content', $fullArea);

is usually finds an element in a given context which is , separated elems.

edited Jun 18, 2014 at 11:45

answered Jun 18, 2014 at 11:35

Jai

74.8k12 gold badges77 silver badges104 bronze badges

1 Comment

Jai Over a year ago

@AmitKumar details added you can take a look.

Collectives™ on Stack Overflow

jQuery selector for multiple elements

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related