jQuery parent() vs. parents()
Welcome jQuery newbies! I’m writing a quick post here to help clarify some differences between the parent() and parents() methods.
Given the following HTML:
<html>…<body><div class=”one”><div class=”two”><p><span>Some text</span></p></div></div></body></html>
$(‘span’).parent() will select the <p> tag such that the element set in the jQuery object is [span].
$(‘span’).parents() will select all parent tags such that the element set in the jQuery object is [p, div.two, div.one, body, html].
So parent() will select the first parent element while parents() will select all elements straight up the DOM tree.
Now jQuery has some great flexibility in that you could do that following:
$(‘span’).parents().filter(‘div’) which would result in [div.two, div.one]. jQuery makes it even easier as the parent() and parents() methods support filtering built in so the above can be reduced to:
$(‘span’).parents(‘div’) giving you [div.two, div.one].
Let’s continue with one more example, let’s say that you only need the first div in the parent DOM tree, jQuery to the rescue $(‘span’).parents(‘div:eq(0)’) will give you [div.two]
-Jonathan
jQuery Calculate Plugin
Dan G. Switzer, II wrote a plugin for easy calculation. It was recently brought up on the jQuery list (Google Groups | Nabble). Worth a look!
http://www.pengoworks.com/workshop/jquery/calculation.plugin.htm
Update: Dan has posted a blog entry that covers use cases and some of it’s innner workings in more detail, again worth a look! http://blog.pengoworks.com/index.cfm/2008/1/23/jQuery-Calculation-Plugin-Making-calculating-easy
Aspect Oriented Programming and jQuery – APO and JavaScript
This was brought up on one of the jQuery lists a little while back. A solid implementation that is lean on code. Also worth noting is that while this uses the jQuery namespace, there isn’t anything jQuery specific. Great project!
Performance Tuning Regular Expressions in JavaScript
Doug D started a thread on the google groups jQuery developer list about a faster trim method he ran across and how counter intuitively it was better to run two expressions rather than one. Matt Kruse then provided a link to a great article on the subject: http://blog.stevenlevithan.com/archives/faster-trim-javascript
The origional thread can be found here (I couldn’t find it at the time of the writing but I’m sure it’s there!): http://www.nabble.com/forum/Search.jtp?forum=20161&local=y&query=faster+trim
jQuery Event Namespacing
A feature often over looked is namespacing your events in jQuery.
jQuery added in support for $(...).bind('event.namespace', fn). This is primarily useful for plugin authors who may bind numerous events to elements and want to remove only their events without needing to keep a pointer to the function they bound. So for example, you can do: $(...).bind('click.myNS', function(){...}); $(...).unbind('click.myNS'); which will unbind the click event with the ‘myNS’ name space.
For more on this read an entry over at Learning jQuery:
http://www.learningjquery.com/2007/09/namespace-your-events
Happy eventing!
-Jonathan
jQuery 1.2.2 Released
jQuery 1.2.2 has been released and features 150 bug fixes and improvements.
http://jquery.com/blog/2008/01/15/jquery-122-2nd-birthday-present/
On Holiday!
Merry Christmas to you all! I am on holiday until after New Years, so I won’t be posting any new tips!
If you have a tip or news item that you want to share on jQuery minute, please drop me a line at tip-time at the jqueryminute domain dot com.
Cheers!
-Jonathan
Wildcard ID’s – Select by ID and Filter
Here’s a solution for selecting elements by ID and running a regex to filter the results:
$(‘*[@id]‘).filter(function() {
var regex = /^regularExpressionToMatchIdsAgainst/;
return ( $(this).attr(‘id’).match(regex) !== null );
})
jQueryForDesigners.com Launched
Remy Sharp (no relation) has launched jQuery For Designers. Be sure to check it out and start participating!
jQuery 1.2.2 beta released
As from the jquery-dev google groups, jQuery 1.2.2 is in beta stage:
John Resig’s Beta Release Post -
Get jQuery 1.2.2b.js
Be sure to read John’s Post about how to test and submitting bugs!