Main Tutorials

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 Author

author image
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

Subscribe
Notify of
8 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Hoang
10 years ago

Hi,

How can I pass css id inside the href:

Thanks.

John
10 years ago

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
10 years ago

I have one question, What below selection will do?

$(“div#id1 .intro”)

R.Nikhil Reddy
10 years ago

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”.

david
10 years ago

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
12 years ago

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?

Mike
11 years ago
Reply to  mkyong

But what if your using class to determine the state of that element. Then you want to assign CSS based on id and class.