w3resource

jQuery CSS - Find an element that contains a specified class

jQuery CSS : Exercise-8 with Solution

Find an element that contains a specified class.

Sample Data :

HTML :

<body>
<div id="div1" class="divclass"></div>
<div id="div2" </div>
<div id="div3" </div>
</body>

CSS:

<style>
 .divclass 
  {
    width: 90px;
	height: 75px;
	margin: 5px;
	background-color:#F3E2A9
 }
</style>

Solution:

HTML Code :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Find an element that contains a specified class</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="div1" class="divclass"></div>
<div id="div2" </div>
<div id="div3" </div>  
 </body>
</html>

CSS Code:

.divclass {
    width: 90px;
    height: 75px;
    margin: 5px;
    background-color:#F3E2A9
  }

JavaScript Code :

console.log($( "#div1" ).hasClass( "divclass" ).toString());
console.log($( "#div2" ).hasClass( "divclass" ).toString());
console.log($( "#div3" ).hasClass( "divclass" ).toString());

Live Demo:

See the Pen jquery-css-exercise-8 by w3resource (@w3resource) on CodePen.


Contribute your code and comments through Disqus.

Previous: Find the outerHeight and outerWidth of an element.
Next: Find the offset of an element.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.