Off the Ridge Code Newsletter


Monthly Archives: January 2015

jQuery – Pro Tip #4 – jQuery Difference between find and filter

Published January 26, 2015 in jQuery - 1Comments

jQuery Difference between find and filter

If I have a list of items such as:

<ul id=”tasks”>
    <li class=”task”>Do some work</li>
    <li class=”task”>Do more work</li>
    <li class=”relax”>Relax!</li>

and I’d like to select all list elements inside with class=”task” assigned.

I might want to do something like this:

// cache the result.
var $tasks = $(‘#tasks li’);

var $task = $tasks.find(‘.task’);

and that of course won’t work. The reason is this:

Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

in other words it says: ‘search through all the child elements only’ and since we are already at the <li> level there’s nothing below it!

The solution to this is to use .filter() method that works on the currently matched elements.

var $task2 = $tasks.filter(‘.task’);

jsFiddle example:

jQuery – Pro Tip #3

Published January 24, 2015 in jQuery , ProTips - 1Comments

Extend jQuery pseudo class

It’s a little bit contrived example, but let’s say I have an input group:

     <div class=”form-group”>
        <input class=”form-control” type=”text” name=”name”>

and I’d like to do something to that input group, such as:


If I do it over and over again, I might consider wrapping it in a method:

function RemoveAddClass(selector){
    $( selector ).each(function() {

and this is pretty good, however there’s a better way, and that is extending jQuery pseudo class:

turning the above into:

$.extend($.expr[“:”], {
    removeAddClass: function(element){     

you can check out my fiddle here:

jQuery – Pro Tip #2

Published January 23, 2015 in jQuery - 1Comments

jQuery – Pro Tip #2 – selector caching!

instead of repeating the selector and hence (re)traveling the DOM:

function doWork(){

cache the selector – caching it outside the method allows for reuse in multiple methods.
var someDivTag = $(‘#divTag’); 
function doWork(){

and finally chain it:
function doWork(){

jQuery – Pro Tip #1.

Published January 23, 2015 in jQuery , ProTips - 0Comments

jQuery – Pro Tip #1

1. Use CDN (content delivery network)
Go to:
and pick a version of jQuery you’re interested in:
<script src=””></script>

2. but don’t forget to fallback onto the local server in case the CDN isn’t available with:
<script> window.jQuery || document.write(“<script src=’js/jquery.js’></script>

3. putting it all together:

[[code style="color: black; word-wrap: normal;"]]czozMzY6XCIgJmx0O2h0bWwmZ3Q7ICA8YnIgLz4gJmx0O2hlYWQmZ3Q7ICAgPGJyIC8+ICAgJmx0O3NjcmlwdCBzcmM9XCIvL2FqYXgue1smKiZdfWdvb2dsZWFwaXMuY29tL2FqYXgvbGlicy9qcXVlcnkvMi4xLjMvanF1ZXJ5Lm1pbi5qc1wiJmx0Oy9zY3JpcHQmZ3Q7ICA8YnIgLz4ge1smKiZdfSAgJmx0O3NjcmlwdCZndDsgIDxiciAvPiAgICAgd2luZG93LmpRdWVyeSB8fCBkb2N1bWVudC53cml0ZShcIiZsdDtzY3JpcHQgc3Jje1smKiZdfT1cJ2pzL2pxdWVyeS5qc1wnJmd0OyZsdDsvc2NyaXB0Jmd0O1wiKTsgIDxiciAvPiAgICZsdDsvc2NyaXB0Jmd0OyAgPGJyIC8+ICZsdDt7WyYqJl19L2hlYWQmZ3Q7ICA8YnIgLz4gJmx0Oy9odG1sJmd0OyAgPGJyIC8+XCI7e1smKiZdfQ==[[/code]]