jQuery: Understanding the “chain”

Posted by bower on March 16, 2010
javascript

get link 分享给你的朋友->bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark

univer citas en linea jQuery: Understanding the “chain”
Categories: Source Code, JavaScript, jQuery

rencontre economique aix en provence 2015 Yesterday I was writing some jQuery code and I thought I came across a bug—until I realized it was a bug in my way of thinking and not with jQuery.

site de rencontre latino portugais

http://mirandamarrsblog.com/?marixyana=pseudo-sympa-pour-site-de-rencontre&8a3=8b What I was trying to do is to dynamically append to the body tag some html that looked like this:
<div>
outer
<div>
inner
</div>
</div>

go here The trick was I wanted jQuery to return a reference to the “inner” <div> element.

http://parkbarnyc.com/?flomasr=site-rencontres-chr%D0%93%C2%A9tiens-gratuit&30b=a7 Knowing that that I could easily append a <div> to the <body> tag by using: $(“<div>inner</div>”).appendTo(“body”);, I thought I could just write the following and all would be well:
$(“<div>inner</div>”)
.appendTo(“<div>outer</div>”)
.appendTo(“body”);

http://sevenhillsglass.com.au/?mikstyis=site-rencontre-en-ligne-sans-inscription&842=2e From looking at the code quickly everything looked ok, but only the <div>inner</div> was being appended to the DOM. This had me confused. I knew that the <div>inner</div> was being inserted into the <div>outer</div>, but why was I not getting the outer <div> in the DOM?

http://godswayradio.com/?rtyt=site-de-rencontre-d%27homme-blanc&93e=d4 That’s when I realized the mistake I made. It’s all about the jQuery “chain”.

rencontre africaine au maroc One of the coolest features of jQuery is the ability to “chain” commands together. This allows you to attach multiple commands together with one line of code.

como conocer gente nueva en argentina The problem I was having is that I was originally thinking the appendTo() method was changing the jQuery chain to refer to the element that I just appended to. This is incorrect. jQuery always references the first element in the chain, unless you use a command that explicitly changes the chain.

This allows you to write a piece of code that appends an element to multiple elements on a page. The following code would put the string “append me!” in bold print to the end of each <div> and <p> element on the page:
$(“<strong>append me!</strong>”)
.appendTo(“div”)
.appendTo(“p”);

So now that I realized my problem, how could I solve my problem? That part is actually quite simple. I just need to call the parent() method after appending to the <div>outer</div>. This changes the jQuery chain so that it’s now referencing the outer <div> instead of the inner <div>.
// create the inner div
var $inner = $(“<div>inner</div>”)
// append it to a new outer div
.appendTo(“<div>outer</div>”)
// next change the jQuery chain to the “outer” div
.parent()
// append the outer div to the body
.appendTo(“body”)
// finally, go back to the last destructive command,
// giving us back a pointer to the “inner” div
.end();

The end() method is important in my case because I want the variable $inner to be a reference to the first <div> I created. Calling the end() method at the end of the chain, makes jQuery go back to what it was referencing before the parent() method was called. I’ve used indenting to illustrate when a destructive call has been made.

rencontre des femmes canadiennes 分享到:人人网开心网腾讯微博新浪微博豆瓣分享腾讯空间百度搜藏腾讯书签

分享给你的朋友->bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark

Tags: ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word