jQuery – How to get element with CSS class name and id

In jQuery, you can get elements with CSS class name and id easily.

For example,

1. ID: #id

  • $(‘#idA’) – selects all elements that have an id of ‘idA’, regardless of its tag name.
  • $(‘div#idA’) – selects all div elements that has an id of ‘idA’.

2. Class: .classname

  • $(‘.classA’) – selects all elements that have an class name of ‘classA’, regardless of its tag name.
  • $(‘div.classA’) – selects all div elements that has an class name of ‘classA’.

Full Example


<html>
<head>
<title>jQuery Get element with class name and id</title>
 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
 
</head>
 
<script type="text/javascript">
 
$(document).ready(function(){
	
    var $element = $('.classABC').html();
    alert($element);
	
    var $element = $('#idABC').html();
    alert($element);

});

</script>
<body>

<h1>jQuery Get element with class name and id</h1>

	<div class="classABC">
		This is belong to 'div class="classABC"' 
	</div>
	
	<div id="idABC">
		This is belong to 'div id="idABC"'
	</div>
	
</body>
</html>

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
7 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
8 Comment authors
JohnGauravR.Nikhil ReddyHoangdavid Recent comment authors
newest oldest most voted
John
Guest
John

I saw codes like these:

$(“.classA”) – selects all elements that have an class name of ‘classA’, regardless of its tag name.
$(“div.classA”) – selects all div elements that has an class name of ‘classA’.

not single quote like yours. Please confirm if you are able to.
Johnny

Gaurav
Guest
Gaurav

I have one question, What below selection will do?

$(“div#id1 .intro”)

R.Nikhil Reddy
Guest
R.Nikhil Reddy

can i get an element of specific tag name, id and class without using jQuery?
Example: i want to get an element with tag name as “span”, id as “menu”, class as “ext”.

Hoang
Guest
Hoang

Hi,

How can I pass css id inside the href:

Thanks.

david
Guest
david

if(checkBoxName==’billingAddress’){
$(“td[class=’formLabelLeft’] input[id^='”+ checkBoxName +”‘]”).toggleClass(function() {
if ($(this).parent().is(‘.formLabelLeft’)) {
$(this).parent().toggleClass(‘hideIt’);
}

if ($(this).parent().next().is(‘.hideIt’)) {
$(this).parent().next().toggleClass(‘showIt’);
}
});

What is this mean ?

amol
Guest
amol

How to select the element with both #id and .classname in one go.
If there is like this:


<div class="simple" id="id_1"></div>
<div class="not_simple" id="id_1"></div>
<div class="simple" id="id_2"></div>
<div class="not_simple" id="id_3"></div>
<div class="simple" id="id_4"></div>

Now I want to select div with id #id_1 and class .simple what should I do?

trackback
jQuery Tutorials | J2EE Web Development Tutorials

[…] Select CSS class name and id with jQuery Select the CSS class name and id with jQuery, $(.classname) and $(#id). […]