Reference to current object in Jquery chain

Question

The following chain works:

    $("</p>").html('message').hide().appendTo("#chat").fadeIn()
.parent().scrollTop($('#chat')[0].scrollHeight);

But this doesn't:

    $("</p>").html('message').hide().appendTo("#chat").fadeIn()
.parent().scrollTop($(this)[0].scrollHeight);

this.scrollHeight doesn't work too. How can i get current object reference in jquery chain?

Joseph Silber · Accepted Answer · 2012-01-09 21:25:53Z

2

You only get access to the current object inside of a callback. There's no way you can get access to the current object in your chain.

Try this:

var $parent = $("</p>").html('message').hide().appendTo("#chat").fadeIn().parent();
$parent.scrollTop($parent[0].scrollHeight);

If you really don't want to break out of you chain, you can re-select:

$("</p>").html('message').hide().appendTo("#chat").fadeIn()
.parent().scrollTop($("#chat")[0].scrollHeight);

But I'd strongly advise you against it. There's no need to select the same DOM element twice.

edited Jan 9, 2012 at 21:25

answered Jan 9, 2012 at 21:19

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

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

Comments

ShankarSangoli · Accepted Answer · 2012-01-09 21:21:19Z

1

In your second code snippet this doesn't point to #chat that's why it doesn't work. this mostly points to the calling function instance or the object which triggered any event.

You can try something like this

var $p = $("</p>").html('message').hide().appendTo("#chat");

$p.fadeIn().parent().scrollTop($p[0].scrollHeight);

answered Jan 9, 2012 at 21:21

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Comments

Šime Vidas · Accepted Answer · 2012-01-09 21:42:59Z

1

Well, it's obvious. The #chat element is a static element and you are dynamically appending paragraphs to it. Therefore, you want to get a reference to that element beforehand (for instance, on page initialization):

var chat = $( '#chat' )[0];

Now, you do this:

$( '<p />' ).html( 'message' ).hide().appendTo( chat ).fadeIn();
$( chat ).scrollTop( chat.scrollHeight );

So, the idea is to retrieve references to the main static elements (chat-box, toolbar, panel, navigation, etc.) on page initialization, and then use those references all over your application code.

answered Jan 9, 2012 at 21:42

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

3 Comments

DyeA Over a year ago

Doesn't $('#chat')[0] return the dom element vs. $('#chat').eq(0) which would return a jquery set?

Šime Vidas Over a year ago

@DyeA Yes, in my code, chat is a reference to the DOM element. I prefer to keep my references "clean", instead of wrapped in jQuery objects.

bergie3000 Over a year ago

Ugh: "Well, it's obvious." It's obviously not obvious to OP.

Collectives™ on Stack Overflow

Reference to current object in Jquery chain

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related