In this post, I will list 10 random jQuery snippets I collected from all of my previous tutorial. If you always follow my tutorial you must be familiar with the following snippets, enjoy!


Traversing Each Element and Do The Same Action
This code will traversing each element that have a class and do the same action on each element. We’ve used this code on “How To Create iPhone-Style Navigation (Part I)” and “iPhone-Style Navigation:AJAX + Rotate (Part II)”

$('.additional-block').each(function() {					
	//Do action
});

Count Previous Siblings
Sometimes we need to count the previous siblings of selected element, we’ve used this code on “Create Animated Navigation Menu From Stratch“.

countPreviousItem = $(this).prevAll('element').length;

Animate Previous Element’s Parent
Just like above code this code we’ve used on “Create Animated Navigation Menu From Stratch“, we can animate or doing some action to the previous element’s parent from the selected element.

$(this).parents('element').prev('element').animate({ marginLeft: someFunctin }, 300);

Get Element’s Index Number
We can get element’s index number from its parent using following code, we’ve used this code on “Create Groovershark-like Widget Slider“.

indexNumber	= $('element').index();

Get Checkbox Value
On “Stylize Your Own Checkboxes” and “[Code Snippet] jQuery : Checkbox & Table” posts we needed a code to check the checkbox is being checked or not, and we’ve used this following code.

checkboxValue = $('checkbox-element').attr('checked');
//OR
checkboxValue = $('checkbox-element')[0].checked;

Count Element’s Padding
Count current element’s padding using this script, we’ve used this script on “Create Animated Navigation Menu From Stratch”

$('element').css('padding-left');
//OR another padding
$('element').css('padding-top');

Does The Element Exists?
Before do some action to the selected element we can check its existance, does it exists or not. We’ve used this code on “[CodeSnippet] jQuery : Confirm User’s Action“.

if($(element).next('anotherElement').length <= 0) {
	//element doesn't exists;
}  else {
	//element exists;
}

Inject Event Function on Any Additional Element
On “[CodeSnippet] jQuery : Confirm User’s Action” we also use this following code to inject an event function on any additional element we’ve added.

$('element').live('click', function(){
	//Do some action
});

Toggle The Function
On “iPhone-Style Navigation:AJAX + Rotate (Part II)” post, we’ve created a button toggle to rotate and rotate back the iPhone, here is the short code :

$('element').toggle(
	function() {
		//Rotate or do some action
	}, 
	function() {
		//Rotate back or do some action
	}
);

Toggle Mouseover and Mouseout
If we want to call different action when user mouseover or mouseout our element, we can use this following code that we’ve used on “How to create The Wire Tumblr in Realtime-alike“.

$('element').hover(
	function() {
		//When mouseover do some action
	}, 
	function() {
		//When mouseout do some action
	}
);

Tags :   Code Snippet    jQuery  

Share :           10 Random jQuery Snippet (via @hdytsgt)

  Similar Stuffs  

• Create Animated Navigation Menu From Stratch
• [Code Snippet] jQuery : Checkbox & Table
• Create Groovershark-like Widget Slider
• Filter Image View Using jQuery
• How To Create iPhone-Style Navigation (Part I)