16
Oct

Quick Tip #7 - Getting to grips with jQuery’s Traversing methods

To be more precise, we’re going to look at some of the functions used in the ‘Finding’ section of jQuery’s Traversing methods. The best way to explain this, is of course, with an example. So lets start with the problem that led me to use Traversing, oh and thanks to @tweaked for prompting me to revisit this topic. Also for reference, I’m going to me using the parent and next functions.

The problem I had

On my blog page I have all my posts listed and for each post I have a ‘link’ section.

links-section

When you click the ‘Related’ or ‘Share +’ links it opens up a div below it (view a demo of what it’s not meant to do).

At first I had this jQuery code below, which opened up the closed section, but it did it to all the divs! Of course it did this because it was toggling every single div with the class of ‘tags’ on the page. What I wanted it to do was only open up the div/section that was next to the post and this is where Traversing comes in.

The jQuery

//when a link with related class is pressed
$("span.related").click(function () {
 
     // toggles the tags div
     $("div.tags").toggle(); 
 
});

The HTML

<ul class="post-links">
	<li><a class="read-more" title="Permanent Link to I’ve got two copies of 1Password for Mac to give away, want one?" href="http://www.nouveller.com/competitions/ive-got-two-copies-of-1password-for-mac-to-give-away-want-one/">Read more</a></li>
	<li><a class="comments" title="Comment on I’ve got two copies of 1Password for Mac to give away, want one?" href="http://www.nouveller.com/competitions/ive-got-two-copies-of-1password-for-mac-to-give-away-want-one/#comments ">Comments (36)</a></li>
	<li><span class="related">Related</span></li>
	<li><span class="share">Share +</span></li>
</ul>
<div class="sub-holder tags">
<h2>Related post(s)</h2>
<ul class="related-post">
	<li><a title="Take a look at 1Password for your Mac and iPhone" href="http://www.nouveller.com/general/take-a-look-at-1password-for-your-mac-and-iphone/">Take a look at 1Password for your Mac and iPhone</a></li>
	<li><a title="I’m giving away a copy of Espresso" href="http://www.nouveller.com/competitions/im-giving-away-a-copy-of-espresso/">I’m giving away a copy of Espresso</a></li>
</ul>
<h2>Tags</h2>
<a rel="tag" href="http://www.nouveller.com/tag/1password/">1Password</a>, <a rel="tag" href="http://www.nouveller.com/tag/giveaway/">Giveaway</a></div>
<!-- /sub-holder tags -->

To solve the problem

Now I’m going to show you how we can Traverse the code rather than just selecting an element by it’s class or ID. Here’s a demo with the new Traversing jQuery.

Explanation: When span.related is clicked it selects itself using (this), then we use the parents function to select the parent ul, then we jump to the next div using the next function which happens to be our div.tags. This then toggles that div and only that div.

//when a link with related class is pressed
$("span.related").click(function () {
 
    //jumps up to the ul, skips to the next div
    $(this).parents('ul').next("div.tags").toggle(); 
 
});

You can see here that we’re not selecting elements by their ID but just hitching a ride around the elements, clever ‘ey?

Author: Benjamin Reid

My name is Benjamin Reid, I live in the UK and keep the magic locked into this site.

Subscribe to the RSS feed some design goodness, get in on the upcoming software give-aways!

This entry was posted on Friday, October 16th, 2009 at 10:03 am and is filed under Quick Tips & tagged with jQuery, Next, Parents, Traversing, XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments so far, why not make one?

Your name

16Oct