10 Random jQuery Code Snippets

In this post, I will list 10 random jQuery snippets I collected from all of my previous tutorial. If you follow my tutorials 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.

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

Count Previous Siblings

Sometimes we need to count the previous siblings of selected element, here is the code to count previous siblings.

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

Animate Previous Element’s Parent

Just like above code, you can put animation on previous element's parent.

we can animate or do 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.

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

Get Checkbox Value

If you are working with checkbox in your forms, lots of time you have to deal with its value. You can use following code to check if the checkbox is checked or not.

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

Count Element’s Padding

Count current element’s padding using this script

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

Check if element exists

Before performing any action on the selected element, we should make sure to check if the element exists.

Use below code to check if the element exists or not.

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

Inject Event Function on Any Additional Element

Use the following code to inject an event function on any additional element we've added.

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

Toggle The Function

To toggle any action, use the following simple 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 actions when user mouseover or mouseout over the element, use the following code.

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