jQuery code to hide last div element

Yesterday I need to hide the last div element present on the webpage and I found that there are various jQuery ways to hide the last div element on the webpage. So thought of sharing...

Using .last() function

jQuery has ".last()" function which returns the last/final element from the set of matched elements.

1	$("div").last().hide();

Using .last() selector

jQuery also has ":last" selector which selects the last element out of set of matched elements.

1	$("div:last").hide();

Using .eq() function

jQuery has ".eq()" function which takes index as argument and returns the element at specified index. It can take positive value as well as negative value as index. When it takes positive value then it starts from the first element as 0-based position. But Providing a negative number indicates a position starting from the end of the set, rather than the beginning.

So to select last element, pass "-1" as index in ".eq()"

1	$("div").eq(-1).hide();

Good Luck....

jQuery Selectors NOT working...

OOPS!!!! jQuery Selectors NOT working.. A very common jQuery problem/issue that you must have face or may face. And there could be tons of reason of selectors not working properly like incorrect syntax, incorrect context.. But do you know there could be another reason which is element ID or css class name? 

Yes, you read it right. Sometimes, if the ID or class containing meta characters such as @ # !" $ % &' ()*+,./:;<=>?[\]^`{|}~ like "foo.bar", "xyz@pqr" , "id#title"....

For example, if your element ID is "myid.3" then below code will not work.

1	$('#myid.3').text('DIV Content Updated');

From jquery API document :

"To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[\]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\. For example, an element with id="foo.bar", can use the selector $("#foo\\.bar")"

So, the correct syntax is,

1	$('#myid\\.3').text('DIV Content Updated');

So, if your ID contains any meta character then use backslashes for selecting elements. But it is not advisable to use meta-characters in DOM identifier as your HTML is not validated.

Reference : http://jquerybyexample.blogspot.com/


Good Luck...

jQuery selectors code snippets demo

Selector is the most basic things in jQuery. Their use is very simple and straight and correct use of selectors can enhance the efficiency of writing jQuery code. I have put together some of the common selectors which are pretty common.

ID Selector

1	$(document).ready(function () {

2	$('#dvDummy').css('background', '#000000');

3

});

Class Selector

1	$(document).ready(function () {

2	$('.class1').css('background', '#000000');

3

});

Element Selector

1	$(document).ready(function () {

2	$('p').css('font-size', '14px');

3

});

Selector (loop through all elements)

1	$(document).ready(function () {

2	$('form *').css('color', '#FFFF00');

3

});

Select Multiple Elements

1	$(document).ready(function () {

2	$('p, div').css('margin', '0');

3

});

The parent > child (immediate child element)

1	$(document).ready(function () {

2	$('div > span').css('color', '#FF0000');

3

});

:first and :last (take the first element or the last element)

1	$(document).ready(function () {

2	$('span:first').css('color', '#FFFF00');

3	$('span:last').css('color', '#FFFF00');

4

});

:even and :odd (Select elements with an even index or odd index elements. The index starts from 0.)

1	$(document).ready(function () {

2	$('tr:even').css('color', '#00FF00');

3	$('tr:odd').css('color', '#0000FF');

4

});

:eq(x) (Selects element with the specified index)

1	$(document).ready(function () {

2	$('tr:eq(2)').css('background', '#FFFF00');

3

});

:contains(text) (Select element which contains specified text)

1	$(document).ready(function () {

2	$('div:contains("jQuery")').css('color', '#FFFF00');

3

});

:hidden (Selects hidden elements)

1	$(document).ready(function() {

2	$('div:hidden').show(500);

3

});

:visible (Selects visible elements)

1	$(document).ready(function() {

2	$('div:visible').css('color', '#FFFF00');

3

});

Reference : http://jquerybyexample.blogspot.com

Good Luck...