Sebastian's Blog: January 2015

Monday, January 26, 2015

jQuery - Pro Tip #4

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>
</ul>

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: http://api.jquery.com/find/

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: http://jsfiddle.net/seba368/gn8L204a/

Saturday, January 24, 2015

jQuery - Pro Tip #3

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">
</div>

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

$('.form-group').removeClass('has-error').addClass('has-success');

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

RemoveAddClass('.form-group');

function RemoveAddClass(selector){
$( selector ).each(function() {
$(this).removeClass('has-error').addClass('has-success');
});
};

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){
$(element).removeClass('has-success').addClass('has-error');
}
});

you can check out my fiddle here: http://jsfiddle.net/seba368/osub4xw2/1/

Friday, January 23, 2015

jQuery - Pro Tip #2

jQuery - Pro Tip #2 - selector caching!

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

function doWork(){
$('#divTag').addClass("has-error");
$('#divTag').slideUp();
}

cache the selector - caching it outside the method allows for reuse in multiple methods.

var someDivTag = $('#divTag');

function doWork(){
someDivTag.addClass("has-error");
someDivTag.slideUp();
}

and finally chain it:

function doWork(){
someDivTag.addClass("has-error").slideUp();
}

Thursday, January 22, 2015

jQuery - Pro Tip #1.

jQuery - Pro Tip #1

1. Use CDN (content delivery network)
Go to: https://developers.google.com/speed/libraries/devguide
and pick a version of jQuery you're interested in:
e.g.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></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:

 <html>  
 <head>   
   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"</script>  
   <script>  
     window.jQuery || document.write("<script src='js/jquery.js'></script>");  
   </script>  
 </head>  
 </html>