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, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

Leave a Reply

avatar
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). […]