w3resource

jQuery: Find all the divisions with a name attribute that contains specified word and sets the background color yellow

jQuery Fundamental - I : Exercise-31

Using jQuery find all the divisions with a name attribute that contains the word 'tutorial' and sets the background color yellow.

<body>
<div  name="tutorial-php">
 <p>PHP</p>
</div>
<div name="java  tutorial"<p>Java</p>
</div>
<div  name="python-tutorial-and-exercises">
 <p>Python</p>
</div>
 
<button  id="button1">Click to see the effect</button>  
</body>

Sample solution :

HTML Code :

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>Using jQuery find all divisions with a name attribute that contains the word tutorial and sets the background color yellow.</title>
 <style type="text/css">
 button {
 display: block;
 margin: 20px 0 0 0;
 }
 </style>
 </head>
 <body>
 <div name="tutorial-php">
 <p>PHP</p>
 </div>
 <div name="java tutorial"<p>Java</p>
 </div>
 <div name="python-tutorial-and-exercises">
 <p>Python</p>
 </div>
 <button id="button1">Click to see the effect</button>
 </body>
</html>

JavaScript Code :

$('#button1').click(function(){ 
$( "div[name~='tutorial']" ).css( "background", "yellow" );
});

See the Pen jquery-fundamental-exercise-31 by w3resource (@w3resource) on CodePen.


Contribute your code and comments through Disqus.

Previous: Using jQuery find all the divisions with a name attribute that contains 'tutorial' and sets the background color yellow.
Next: Using jQuery find all the divisions with a name attribute that contains the word 'tutorial' and sets the background color yellow.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Share this Tutorial / Exercise on : Facebook and Twitter