w3resource

jQuery: Find all the divisions with a name attribute and sets the background color

jQuery Fundamental - I : Exercise-30

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

<body>
<div  name="tutorial-php">
<p>PHP</p>
</div>
<div  name="java-articles"<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 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-articles"<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-30 by w3resource (@w3resource) on CodePen.


Contribute your code and comments through Disqus.

Previous: Using jQuery find all links with an hreflang attribute "de".
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.



Follow us on Facebook and Twitter for latest update.