Programming4us
         
 
 
Programming

jQuery 1.3 : Developing plugins - DOM traversal methods

11/19/2010 2:34:08 PM
In some cases, we may want a plugin method to change which DOM elements are referenced by the jQuery object. For example, suppose we wanted to add a DOM traversal method that found the grandparents of the matched elements:
jQuery.fn.grandparent = function() {
plug-ins, developingDOM traversal method, addingvar grandparents = [];
this.each(function() {
grandparents.push(this.parentNode.parentNode);
});
grandparents = jQuery.unique(grandparents);
return this.setArray(grandparents);
};

This method creates a new grandparents array, populating it by iterating over all of the elements currently referenced by the jQuery object. The standard DOM .parentNode property is used to find the grandparent elements, which are pushed onto the grandparents array. This array is stripped of its duplicates with a call to $.unique(). Then the internal jQuery .setArray() method changes the set of matched elements to the new array. Now, we can find and operate on the grandparent of an element with a single method call.

To test our method, we'll set up a deeply-nested<div> structure:

<div>Deserunt mollit anim id est laborum</div>
<div>Ut enim ad minim veniam
<div>Quis nostrud exercitation
<div>Ullamco laboris nisi
<div>Ut aliquip ex ea</div>
<div class="target">Commodo consequat
<div>Lorem ipsum dolor sit amet</div>
</div>
</div>
</div>
plug-ins, developingDOM traversal method, adding<div>Duis aute irure dolor</div>
<div>In reprehenderit
<div>In voluptate</div>
<div>Velit esse
<div>Cillum dolore</div>
<div class="target">Fugiat nulla pariatur</div>
</div>
<div>Excepteur sint occaecat cupidatat</div>
</div>
</div>
<div>Non proident</div>
</div>
<div>Sunt in culpa qui officia</div>


We'll identify the target elements (<div class="target">) by styling their text bold:

Now we can locate the items' grandparent elements by using our new method:

$(document).ready(function() {
$('.target').grandparent().addClass('highlight');
});

The highlight class correctly italicizes both grandparent items on the page:

However, this method is destructive. The actual jQuery object is modified as a side effect&mdash;one that becomes evident if we store the jQuery object in a variable:

$(document).ready(function() {
DOM traversal method, addingside effectvar $target = $('.target');
$target.grandparent().addClass('highlight');
$target.hide();
});

This code should highlight the grandparent elements, and then hide the target elements. However, the actual effect is that the grandparents are hidden instead:

The jQuery object stored in $target has changed to refer to the grandparent. To avoid this, we need to make the method nondestructive. This is made possible by the internal stack jQuery keeps for each object.

jQuery.fn.grandparent = function() {
DOM traversal method, addinginternal stack jQuery usedvar grandparents = [];
this.each(function() {
grandparents.push(this.parentNode.parentNode);
});
grandparents = jQuery.unique(grandparents);
return this.pushStack(grandparents);
};


By calling .pushStack() instead of .setArray(), we create a new jQuery object, rather than modifying the old one. Now the $target object is not modified, and the original target objects are hidden by our code:

As a side benefit, .pushStack() also allows the .end() and .andSelf() methods to work with our plugin, so we can chain methods together properly:

$(document).ready(function() {
$('.target').grandparent().andSelf().addClass('highlight');
});

DOM traversal methods such as .children() were destructive operations in jQuery 1.0, but became non-destructive in 1.1.


Other -----------------
- Using Cloud Services : Exploring Online Planning and Task Management
- Using Cloud Services : Exploring Online Scheduling Applications
- Using Cloud Services : Exploring Online Calendar Applications
- SOA with .NET and Windows Azure : Service Contracts with WCF (part 3)
- SOA with .NET and Windows Azure : Service Contracts with WCF (part 2)
- SOA with .NET and Windows Azure : Service Contracts with WCF (part 1)
- Cloud Security and Privacy : Data Security and Storage
- iPad SDK : Working with Documents - Desktop Synchronization
- Required Project Images for iPad Apps
- iPhone SDK : GameKit Voice Chat
- iPhone SDK : Creating Basic GameKit Services (part 2) : Sending and Receiving Data
- iPhone SDK : Creating Basic GameKit Services (part 1)
- iPad : Navigating with Maps
- Adding iPad to the Mix
- A Brief History of Legacy .NET Distributed Technologies : .NET Remoting
- A Brief History of Legacy .NET Distributed Technologies : .NET Enterprise Services
- iPad SDK : Outputting to an External Screen
- iPad SDK : Displaying Multiple Videos
- Parallel Programming Drivers
- Parallel Programming with Microsoft .Net : Parallel Loops - An Example
 
 
Most View
- Programming WCF Services : Data Contracts - Collections (part 2) - The CollectionDataContract Attribute & Dictionaries
- Windows 7 : Enabling MAC Address Filtering
- SharePoint 2010 : Get Started with Your Personal Site
- Windows Server 2008 : Controlling Access to Web Services (part 1) - Understanding Anonymous Authentication
- SQL Server 2008 : Implementing Error Handling - Understanding Errors
- Windows 7 : Creating a Windows Network - Choosing a Network and Cabling System
- Programming Windows Azure : Table Operations - Using Partitioning
- Windows Phone 7 : Working with Maps
- Windows 7 : Enabling the Shutdown Event Tracker
- Auditing an Existing Site to Identify SEO Problems (part 1 - Elements of an Audit
Top 10
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 3) - Configuring Recipient Filtering
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 2)
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 1)
- Implementing Edge Services for an Exchange Server 2007 Environment : Installing and Configuring the Edge Transport Server Components
- What's New in SharePoint 2013 (part 7) - BCS
- What's New in SharePoint 2013 (part 6) - SEARCH
- What's New in SharePoint 2013 (part 6) - WEB CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 5) - ENTERPRISE CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 4) - WORKFLOWS
- What's New in SharePoint 2013 (part 3) - REMOTE EVENTS