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>
Tags :

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.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

  • Pingback: stream movies()

  • Pingback: watch free movies online()

  • Pingback: tv online, online tv()

  • Pingback: stream movies()

  • Pingback: streaming movies()

  • Pingback: watch tv show episodes()

  • Pingback: watch movies online()

  • Pingback: Blue Coaster33()

  • 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

    I have one question, What below selection will do?

    $(“div#id1 .intro”)

  • 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

    Hi,

    How can I pass css id inside the href:

    Thanks.

  • 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

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

     
    &lt;div class=&quot;simple&quot; id=&quot;id_1&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;not_simple&quot; id=&quot;id_1&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;simple&quot; id=&quot;id_2&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;not_simple&quot; id=&quot;id_3&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;simple&quot; id=&quot;id_4&quot;&gt;&lt;/div&gt;

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

    • http://www.mkyong.com mkyong

      In HTML, “id” should be unique in your page.

      • Mike

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

  • Pingback: jQuery Tutorials | J2EE Web Development Tutorials()