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
}
);
Top comments (0)