The wrapped set is simply a list of DOM elements(with their children) in the order in which they are defined in the current document that matches a selector<\/strong> or in the order in which they have been created on the fly with the $(html)<\/em> function<\/strong>. <\/p>\n Consequently, by definition, a wrapped set is a result of:<\/p>\n To be exact, the wrapped set is a wrapper jQuery object<\/strong> and does not only contains those elements. It also offers numerous handy jQuery functions<\/strong>. Below is an example:<\/p>\n The selector $(‘td:nth-child(1)’)<\/strong> will give the following wrapped set:<\/p>\n Please notice that the first 4 properties of the jQuery(‘td:nth-child(1)’)<\/strong> wrapped set is the 4 HTMLTableDataCellElement<\/strong> fetched by the selector (from 0 to 3). The following properties are jQuery functions (add<\/em>, addClass<\/em>, after<\/em>…)<\/p>\n <\/p>\n Indeed, all jQuery functions can be split into 2 distincts classes:<\/p>\n jQuery(‘td’)<\/strong> will return a wrapped set containing the following DOM elements:<\/p>\n Now jQuery(‘td’).find(‘.centerText’)<\/strong> will filter the current set with all elements matching the selector. The new wrapped set is:<\/p>\n <\/p>\n All function chainings in jQuery are based on non-utility functions. You can’t do chaining with utility functions simply because they only return scalar values and not wrapped set. Please notice that using an utility function in the middle of a chain will result in stopping it<\/strong> (makes sense).<\/p>\n The idea behing the function chaining is to navigate back and forth between different wrapped sets. Internally jQuery maintains a stack to keep track of all sets it encounters.<\/p>\n Let’s consider the following DOM section:<\/p>\n and the following chain jQuery(‘#containterDiv’).find(‘div’).filter(‘#firstChild’).find(‘span’);<\/strong><\/p>\n Below is an illustration of how jQuery keeps track of wrapped sets across time:<\/p>\n Until now, we only see methods to restrict or filter the current wrapped set. What if we want to come back to the previous set ?<\/p>\n For this, jQuery provides the magical .end()<\/strong> method. This method simply pop the current wrapped set off the stack and goes back to the previous set.<\/p>\n Now that we understand how the sets are stacked, it’s easier to navigate through DOM sections using jQuery methods chaining. Let’s illustrate it by a more complex example:<\/p>\n As you can see, the chaining feature is quite powerfull. You can navigate back and forth in the wrapped-set stack with the .end()<\/strong> function. It is even possible to chain multiple .end() successively to navigate many wrapped sets back<\/strong>. It can becomes quickly unreadable so do not abuse of this function too much.<\/p>\n There is a good practice, when using complex chaining, to indent properly your code to make it at least readable and understandable for future developers. The previous chain can be turned into:<\/p>\n Each indentation level corresponds to a wrapped set change.<\/p>\n In this article we explore the JQuery chaining internal mechanism to see how it works and how it can improve our web development.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[27,13],"tags":[],"_links":{"self":[{"href":"https:\/\/www.doanduyhai.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1057"}],"collection":[{"href":"https:\/\/www.doanduyhai.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.doanduyhai.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.doanduyhai.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.doanduyhai.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1057"}],"version-history":[{"count":0,"href":"https:\/\/www.doanduyhai.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1057\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.doanduyhai.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1057"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.doanduyhai.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1057"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.doanduyhai.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1057"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n<table border="0" cellspacing="1">\n <thead>\n <tr>\n <th>Name<\/th><th>Sexe<\/th><th>Age<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>John<\/td><td>Male<\/td><td>35<\/td>\n <\/tr>\n <tr>\n <td>Sue<\/td><td>Female<\/td><td>23<\/td>\n <\/tr>\n <tr>\n <td>Sally<\/td><td>Female<\/td><td>28<\/td>\n <\/tr>\n <tr>\n <td>Peter<\/td><td>Male<\/td><td>25<\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n\n<\/pre>\n
![\"\"](\"https:\/\/www.doanduyhai.com\/blog\/wp-content\/uploads\/2012\/05\/jquery-wrapped-set.png\" "\\"jquery-wrapped-set\\"")
<\/a><\/p>\nB) jQuery function classes<\/h3>\n
\n
\n
\n
\nLet’s consider the following DOM portion:<\/p>\n\n<table border="0" cellspacing="1">\n <tr>\n <td class="centerText">John<\/td>\n <\/tr>\n <tr>\n <td>Sue<\/td>\n <\/tr>\n <tr>\n <td>Sally<\/td>\n <\/tr>\n <tr>\n <td>Peter<\/td>\n <\/tr>\n<\/table>\n<\/pre>\n
\n <td class="centerText">John<\/td>\n <td>Sue<\/td>\n <td>Sally<\/td>\n <td>Peter<\/td>\n<\/pre>\n
\n <td class="centerText">John<\/td>\n<\/pre>\n
II Chaining mechanism<\/h1>\n
A) Internal set stack<\/h3>\n
\n\t<div id="containterDiv">\n\t\t<div id="firstChild">\n\t\t\t<span class="centerText">Test<\/span>\n\t\t<\/div>\n\t\t<div id="secondChild">\n\t\t\t<span>Another Text<\/span>\n\t\t<\/div>\n\t<\/div>\n<\/pre>\n
<\/a>
\n <\/p>\nB) Inter-sets navigation<\/h3>\n
\njQuery (\u2018#containerDiv\u2019)
\n.find(‘#firstChild’).attr(‘id’,”)
\n.find(‘span’).addClass(‘big’)
\n.end()
\n.append(‘After Test<\/span>‘)
\n.end()
\n.find(‘#secondChild’).attr(‘id’,”)
\n.find(‘span’).addClass(‘bigger’);
\n<\/strong><\/p>\n<\/a>
\n<\/a><\/p>\n
\njQuery(‘#containterDiv’)
\n .find(‘#firstChild’)
\n .attr(‘id’,”)
\n .find(‘span’)
\n .addClass(‘big’).end()
\n .append(‘After Test<\/span>‘).end()
\n .find(‘#secondChild’)
\n .attr(‘id’,”)
\n .find(‘span’)
\n .addClass(‘bigger’);
\n<\/strong><\/p>\n
\n <\/p>\n","protected":false},"excerpt":{"rendered":"