DEV Community

Cover image for 10 Random jQuery Code Snippets
Shahid Siddique
Shahid Siddique

Posted on

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  
}); 
Enter fullscreen mode Exit fullscreen mode

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;  
Enter fullscreen mode Exit fullscreen mode

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);  
Enter fullscreen mode Exit fullscreen mode

Get Element’s Index Number

We can get element’s index number from its parent using following code.

indexNumber = $('element').index(); 
Enter fullscreen mode Exit fullscreen mode

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;  
Enter fullscreen mode Exit fullscreen mode

Count Element’s Padding

Count current element’s padding using this script

$('element').css('padding-left');  
//OR another padding  
$('element').css('padding-top');  
Enter fullscreen mode Exit fullscreen mode

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;  
} 
Enter fullscreen mode Exit fullscreen mode

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  
});  
Enter fullscreen mode Exit fullscreen mode

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  
    }  
);  
Enter fullscreen mode Exit fullscreen mode

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  
    }  
); 
Enter fullscreen mode Exit fullscreen mode

Top comments (0)