Javascript JQuery chaining

Question

Let's say we have :

$("p")[0].innerHTML;

and

$("p").html();

In the above examples, we have the same result. So I was wondering how can JQuery return both the nodelist and itself to allow chaining ?

It's because the jQuery selector returns an object. You're then just calling the properties of that object, in this case html and 0. If you console.log($('p')) you'll see all the methods listed. — Rory McCrossan
– Rory McCrossan, Commented Jan 21, 2016 at 10:14
Do console.log($("p")); and console.log($("p")[0]); you will understand. — Parth Trivedi
– Parth Trivedi, Commented Jan 21, 2016 at 10:15

Quentin · Accepted Answer · 2016-01-21 10:17:15Z

2

So I was wondering how can JQuery return both the nodelist and itself to allow chaining ?

It doesn't.

It only returns itself (which it an object).

That object has a property called 0 which contains the first element in the array of elements. It also has a property called html which contains a function.

answered Jan 21, 2016 at 10:17

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

3 Comments

Quentin Over a year ago

@TrueBlueAussie — It isn't an array, but even if it was, so what? Arrays (except empty arrays) have a property called 0. An array is just an object which inherits some properties along the prototype chain from Array and is designed to hold data using properties with integer values as their names.

iCollect.it Ltd Over a year ago

Just checked and you are correct. That's cute. It implies that $("p")["0"].innerHTML also works which I just tested and yes, it has a number property for each "array" entry. Thanks for that little titbit. My ignorance has lessened +1 :)

user3292788 Over a year ago

It's less magical than what I was expecting. So if I've understood well, each element that is retrieved with the selector is stored as a property with a numeric index ?

Yuval Perelman · Accepted Answer · 2016-01-21 10:18:41Z

0

that is called fluent syntax. each function returns the object it is given. something like

function f(obj){
    doSomething(obj);
    return obj; 
}

answered Jan 21, 2016 at 10:18

Yuval Perelman

4,8891 gold badge25 silver badges33 bronze badges

Collectives™ on Stack Overflow

Javascript JQuery chaining

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related