Manipulating the DOM with jQuery: 10+ useful code snippets
Add a CSS class to a specific element
A very clean way to change an element look and feel is to add a css class, instead of adding inline styles. Using jQuery, this is pretty easy to do:
$('#myelement').addClass('myclass');
Removing a CSS class from a specific element
It’s great to be able to add some CSS classes, but we also need to know how to remove unwanted classes. The following line of code will do that:
$('#myelement').removeClass('myclass');
Check if a specific element has a CSS class
If your application or site is frequently adding and removing classes to a particular element, it can be very useful to be able to check out if an element has a certain CSS class.
$(id).hasClass(class)
Switch CSS using jQuery
As we saw with the previous examples, adding or removing css styles to an element is very simple using jQuery. But what if you want to completely remove the document css file and attach a new stylesheet? Good news, it is extremely simple as well, as shown in the following example:
$('link[media='screen']').attr('href', 'Alternative.css');
Source: http://addyosmani.com/blog/50-jquery-snippets-for-developers/
Append HTML to an element
When you need to append some html to an element, the append() method is a life saver:
$('#lal').append('sometext');
Check if an element exists
When working with Javascript, we often need to check if an element exists or not. Using jQuery and the length property, it is very simple to do: If length == 0, no elements are used on the page. Otherwise, some are used.
if ($('img').length) {
log('We found img elements on the page using "img"');
} else {
log('No img elements found');
}
Source: http://jqueryfordesigners.com/element-exists/
Get the parent element of an element
When working with the DOM, you may need to know which element is the direct parent of another element. The closest() method will let you know:
var id = $("button").closest("div").attr("id");
Source: http://stackoverflow.com/questions/545978/finding-the-id-of-a-parent-div-using-jquery
Get element siblings
The siblings() method is a very handy tool to get siblings of an element. As shown below, using this method is extremely simple:
$("div").siblings()
Remove an option from a select list
When working with select lists, you may want to update the content according to the user actions. To remove an option from a select list, the following code will do the trick:
$("#selectList option[value='2']").remove();
Source: http://calisza.wordpress.com/2009/03/29/6-jquery-snippets-you-can-use-to-manipulate-select-inputs/
Get the selected option as text
Extremely useful when you need to quickly check out what a visitor selected from your select list.
$('#selectList :selected').text();
Apply a “zebra” effect on tables
When using tables, it is a good idea, for better readability, to give a different style to one line out of two. Using jQuery, this can be done easily, without any additional html markup.
$("tr:odd").addClass("odd");
Source: http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/
Count children of an element
If you’d like to count how many div elements are children of #foo, the following line will let you know. Simple and efficient!
$("#foo > div").length
Source: http://tympanus.net/codrops/2010/01/05/some-useful-javascript-jquery-snippets/
Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!
Manipulating the DOM with jQuery: 10+ useful code snippets
