JQuery Quiz III
1. Find the text in the first paragraph (stripping out the html), then set the html of the last paragraph to show it is just text (the red bold is gone). <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>text demo</title> <style> p { color: blue; margin: 8px; } span { color: red; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <p><span>Test</span> Paragraph.</p> <p></p> <script> <!—INSERT YOUR JQUERY CODE HERE - - > </script> </body> </html>
Solution:- $(document).ready(() => { let first = $('p').first(); first.detach(); $('p').last().html(first.text()); });
2. Write jQuery code to create a red background for the level-2 list items. <ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li> </ul>
Solution:- $(document).ready(() => $(".level-2").children().css("background-color", "red"));
3. Write jQuery code to select the element that comes immediately before item three and change its background color to blue. <ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
Solution:- $(document).ready(() => $(".third-item").prev().css("background-color", "red"));
4. Let us one additional requirement for the "Go Vegetarian" button of the Webville Eatery Menu described in Chapter 4 of Head First jQuery: "Turkey" in the ingredient list of any entree is replaced by "Mashed Potatoes" in the vegetarian version. You may assume there is a class "turkey" that identifies these items in the list. Describe the changes to the Javascript (jQuery) code to implement this new requirement.
Solution:- $(".turkey").replaceWith("<li class='mash_potato'><em>Mashed Potatoes</em></li>");
5. Write Javascript (jQuery) code to change the color of the parent and grandparent list items of the span of text ("some text") in the following to green. <!DOCTYPE html> <html> <head> <script> $(document).ready(function(){ <!—INSERT YOUR JQUERY CODE HERE - - > }); </script> </head> <body> <div class="ancestors"> <div> (great-grandparent) <ul> (grandparent) <li> (direct parent) <span>some text</span> </li> </ul> </div> </div> </body> </html>
Solution:- $(document).ready(() => $("span").parent().parent().css("color", "green"));