PLEASE HELP JAVA PLEASE jqt.html: JQuery DOM Traversal</a></h2> <!-- NOTE: remove the style="display: none" when you want to have the forum description on the topic body --> <div style="display: none !important;">Business, Finance, Economics, Accounting, Operations Management, Computer Science, Electrical Engineering, Mechanical Engineering, Civil Engineering, Chemical Engineering, Algebra, Precalculus, Statistics and Probabilty, Advanced Math, Physics, Chemistry, Biology, Nursing, Psychology, Certifications, Tests, Prep, and more.<br /></div> <div class="action-bar bar-top"> <a href="./posting.php?mode=reply&t=24536" class="button" title="Post a reply"> <span>Post Reply</span> <i class="icon fa-reply fa-fw" aria-hidden="true"></i> </a> <div class="dropdown-container dropdown-button-control topic-tools"> <span title="Topic tools" class="button button-secondary dropdown-trigger dropdown-select"> <i class="icon fa-wrench fa-fw" aria-hidden="true"></i> <span class="caret"><i class="icon fa-sort-down fa-fw" aria-hidden="true"></i></span> </span> <div class="dropdown"> <div class="pointer"><div class="pointer-inner"></div></div> <ul class="dropdown-contents"> <li> <a href="./viewtopic.php?t=24536&view=print" title="Print view" accesskey="p"> <i class="icon fa-print fa-fw" aria-hidden="true"></i><span>Print view</span> </a> </li> </ul> </div> </div> <div class="pagination"> 1 post • Page <strong>1</strong> of <strong>1</strong> </div> </div> <div style="margin: 10px 0;" data-phpbb-ads-id="1"> <center> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5236622372999972" crossorigin="anonymous"></script> <!-- RESPONSIVE-MAIN --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5236622372999972" data-ad-slot="8366190081" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div id="p25444" class="post has-profile bg2"> <div class="inner"> <dl class="postprofile" id="profile25444"> <dt class="has-profile-rank no-avatar"> <div class="avatar-container"> </div> <a href="./memberlist.php?mode=viewprofile&u=2" style="color: #AA0000;" class="username-coloured">answerhappygod</a> </dt> <dd class="profile-rank">Site Admin</dd> <dd class="profile-posts"><strong>Posts:</strong> 899603</dd> <dd class="profile-joined"><strong>Joined:</strong> Mon Aug 02, 2021 8:13 am</dd> </dl> <div class="postbody"> <div id="post_content25444"> <h3 class="first"> <a href="./viewtopic.php?p=25444#p25444">PLEASE HELP JAVA PLEASE jqt.html: <!DOCTYPE html> <html> <head> <title> JQuery DOM Traversal</a> </h3> <ul class="post-buttons"> <li> <a href="./posting.php?mode=quote&p=25444" title="Reply with quote" class="button button-icon-only"> <i class="icon fa-quote-left fa-fw" aria-hidden="true"></i><span class="sr-only">Quote</span> </a> </li> </ul> <p class="author"> <a class="unread" href="./viewtopic.php?p=25444#p25444" title="Post"> <i class="icon fa-file fa-fw icon-lightgray icon-md" aria-hidden="true"></i><span class="sr-only">Post</span> </a> <span class="responsive-hide">by <strong><a href="./memberlist.php?mode=viewprofile&u=2" style="color: #AA0000;" class="username-coloured">answerhappygod</a></strong> » </span><time datetime="2021-11-27T16:46:42+00:00">Sat Nov 27, 2021 10:46 am</time> </p> <div class="content">PLEASE HELP<br> JAVA PLEASE<br> <div class="inline-attachment"> <dl class="file"> <dt class="attach-image"><img src="./download/file.php?id=24252" class="postimage" alt="Please Help Java Please Jqt Html Doctype Html Html Head Title Jquery Dom Traversal 1" onclick="viewableArea(this);" /></dt> <dd>Please Help Java Please Jqt Html Doctype Html Html Head Title Jquery Dom Traversal 1 (37.86 KiB) Viewed 45 times</dd> </dl> </div> <div class="inline-attachment"> <dl class="file"> <dt class="attach-image"><img src="./download/file.php?id=24253" class="postimage" alt="Please Help Java Please Jqt Html Doctype Html Html Head Title Jquery Dom Traversal 2" onclick="viewableArea(this);" /></dt> <dd>Please Help Java Please Jqt Html Doctype Html Html Head Title Jquery Dom Traversal 2 (52.43 KiB) Viewed 45 times</dd> </dl> </div> jqt.html:<br> <!DOCTYPE html><br> <html><br> <head><br> <title><br> JQuery DOM Traversal<br> <br> </title><br> <link rel="stylesheet"<br> type="text/css" href="demoJQT.css" /><br> <script<br> src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js%22%3E%3C/script" class="postlink" target="_blank">https://ajax.googleapis.com/ajax/libs/j ... "></script</a>><br> <br> <script type="text/javascript"<br> src="demoJQT.js"></script><br> </head><br> <body><br> <div id="level4"> Level 4<br> div<br> <p>Para in Level<br> 4</p><br> <div<br> id="level3">Level 3 div<br> <a<br> id="level3link" href="http://www.google.com">link in level<br> 3</p><br> <div<br> id="level2"> Level 2 div <br> <br> <br> <div id="level1">Level 1 div <br> <br> <div id="content1">Sibling #1<br> div</div> <br> <br> <div id="content">Content div<br> <br> <h1>Heading<br> 1</h1><br> <br> <p>This is a<br> paragraph</p><br> <br> <a<br> href="http://www.tri-c.edu">Click here for Tri-C</a><br> <br> <div id="desc1"><br> Description Div<br> <br> <p>Para<br> 1</p><br> <br> <p>Para<br> 2</p><br> <br> <p>Para<br> 3</p><br> <br> <a<br> href="http://www.google.com">Google link</a><br> <br> </div><br> <br> <ul id="list#1"><br> List<br> <br> <li<br> id="item1">item1</li><br> <br> <li<br> id="item2">item2</li><br> <br> <li<br> id="item3">item3</li><br> <br> <li<br> id="item4">item4</li><br> <br> <li<br> id="item5">item5</li><br> <br> </ul> <br> <br> <br> <br> <br> </div><br> <br> <div id="content2">Sibling #2<br> div</div><br> <br> <p id="content3">Sibling #3<br> para</p><br> <br> </div> <br> <br> <br> </div><br> </div> <br> <br> </div><br> <div id="btnPanel"> <br> <button<br> id="button1">Parent</button><br> <button<br> id="button2">Parents(Ancestor)</button><br> <button<br> id="button3">Parentsuntil(Ancestors)</button><br> <button<br> id="button4">Children</button><br> <button<br> id="button5">Siblings</button><br> <button<br> id="button6">Find descendants</button><br> </div><br> <div id="btnPanel2"> <br> <button<br> id="button7">Next</button><br> <button<br> id="button8">Prev</button><br> <button<br> id="button9">Closest</button><br> <button<br> id="button10">First</button><br> <button<br> id="button11">Last</button><br> <button<br> id="button12">Filter</button><br> <button<br> id="button13">Not</button><br> <button<br> id="button14">Slice</button><br> </div><br> </body><br> </html><br> jqt.css:<br> #container<br> {<br> width: 500px;<br> color: purple;<br> }<br> div{<br> border: 1px solid pink;<br> padding: 5px;<br> }<br> section p, a, div, h1{<br> margin-left: 5px;<br> color: navy;<br> }<br> #content<br> {<br> font-size: 20px;<br> font-weight: bold;<br> border: 5px solid hotpink;<br> background-color: lightblue;<br> }<br> #btnPanel, #btnPanel2<br> {<br> background-color: black;<br> width: 700px;<br> padding: 20px; <br> }<br> jqt.js:<br> //JQ DOM Traversal<br> //$("") will be used as a frame of reference<br> //parent()<br> //parents()<br> //find()<br> //siblings()<br> //children()<br> <br> //Additional Sibling methods <br> //next<br> //nextAll<br> //nextUntil <br> <br> //prev<br> //prevAll<br> //prevUntil<br> <br> //closest<br> <br> <br> //first<br> //last<br> //filter<br> //not <br> //slice<br> $(function(){ //$(document).ready(function(){})<br> <br> console.log("hello");<br> $("#button1").on("click",function(){<br> $("#content").parent().css("border","5px<br> darkgreen solid"); <br> $("#content").parents().css("color","black");<br> <br> });<br> $("#button2").on("click",function(){<br> <br> $("#content").parents().css("background-color","lightgreen");<br> <br> $("#content").parents().css("color","white");<br> <br> });<br> $("#button3").on("click",function(){<br> <br> $("#content").parentsUntil("#level3").css("border","dashed 5px<br> yellow");<br> $("#content").parents().css("color","black");<br> <br> });<br> $("#button4").on("click",function(){<br> //children are elements at a lower level in<br> the hierarchy<br> $("#content").children().css("border","3px<br> dotted blue");<br> <br> console.log($("#content").children().length);<br> });<br> $("#button5").on("click",function(){<br> //siblings are elements at the same level in<br> the hierarchy<br> <br> $("#content").siblings().css("background-color","purple");<br> $("#content").siblings().css("color","white");<br> <br> });<br> $("#button6").on("click",function(){<br> var descendants = $("#content").find("p");//*<br> means all descendants<br> descendants.each(function(){<br> <br> $(this).css("background-color","lightgreen");<br> <br> console.log($(this).html());<br> });<br> });<br> })<br> You will have to write code to make 2nd row of buttons work: Next Prev Closest First Last Filer Not Slice Next Apply next!) method to #content. Then for whatever element is returned, set html to "Sibling set by next() method also set background color to yellow Heading 1 Part Port Para . Prev Apply prev) method to #content. Then for whatever element is returned. set htmito "Sibling set by prevo method' also set background color to grey . " Castle Ileading 1 Taple Click hecelac Descriptive Des Para1 Para Peru Google bile Lt . c. .it . item . . item Closest Apply closesti) method to #item1 which is a <li> element. Then for whatever element is returned set color to orange < Para 3 Google link List . . tom <br> <br> First Apply first() method to "tag. Then for whatever element is returned, set background color to red Google link itemi trema Last Apply last) method to "iitag. Then for whatever element is returned. set background color to red Google link ..... List . iteml . item2 . item3 • item4 .tems Filter Apply filter() method to "r" tag so that item is filtered. Then for whatever elements are returned, set background color to red List • iteml • tem2 • item3 • item4 • items Not Apply not method to "Ir tag and exclude item2. Then for whatever elements are returned, set background color to red , List Hemel . item2 . item3 . tem . Slice Apply slice() method to "li" tag. Then for whatever element is returned, set background color to red ONLY for the middle 3 list items. ". , List • item] . tem • tem3 . tem • item5</div> <div id="sig25444" class="signature"><strong class="text-strong"><span style="color:#0040FF"> Join a community of subject matter experts. </span><a href="/ucp.php?mode=register" class="postlink">Register</a> for <span style="color:#FF0040">FREE</span> to view <span style="color:#FF0040"> <a href="https://amzn.to/3N8JaeG" target="_blank" class="postlink autolinks">solutions</a>, replies, and use search function. </span><span style="color:#FF00BF">Request answer by replying!</span></strong></div> </div> </div> <div class="back2top"> <a href="#top" class="top" title="Top"> <i class="icon fa-chevron-circle-up fa-fw icon-gray" aria-hidden="true"></i> <span class="sr-only">Top</span> </a> </div> </div> </div> <div style="margin: 10px 0;" data-phpbb-ads-id="2"> <center> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5236622372999972" crossorigin="anonymous"></script> <!-- RESPONSIVE-MAIN --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5236622372999972" data-ad-slot="8366190081" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="action-bar bar-bottom"> <a href="./posting.php?mode=reply&t=24536" class="button" title="Post a reply"> <span>Post Reply</span> <i class="icon fa-reply fa-fw" aria-hidden="true"></i> </a> <div class="dropdown-container dropdown-button-control topic-tools"> <span title="Topic tools" class="button button-secondary dropdown-trigger dropdown-select"> <i class="icon fa-wrench fa-fw" aria-hidden="true"></i> <span class="caret"><i class="icon fa-sort-down fa-fw" aria-hidden="true"></i></span> </span> <div class="dropdown"> <div class="pointer"><div class="pointer-inner"></div></div> <ul class="dropdown-contents"> <li> <a href="./viewtopic.php?t=24536&view=print" title="Print view" accesskey="p"> <i class="icon fa-print fa-fw" aria-hidden="true"></i><span>Print view</span> </a> </li> </ul> </div> </div> <div class="pagination"> 1 post • Page <strong>1</strong> of <strong>1</strong> </div> </div> <div class="action-bar actions-jump"> <p class="jumpbox-return"> <a href="./viewforum.php?f=3" class="left-box arrow-left" accesskey="r"> <i class="icon fa-angle-left fa-fw icon-black" aria-hidden="true"></i><span>Return to “Archived Questions & Answers”</span> </a> </p> <br /><br /> </div> <script> (function() { var links = document.querySelectorAll('dl.postprofile dd.profile-contact a[href]'); for (var i = 0; i < links.length; i++) { var href = links[i].getAttribute('href'); if (/^https?:\/\/.+/.test(href)) { links[i].target = '_blank'; } } })(); </script> </div> <div id="page-footer" class="page-footer" role="contentinfo"> <div class="navbar" role="navigation"> <div class="inner"> <ul id="nav-footer" class="nav-footer linklist" role="menubar"> <li class="breadcrumbs"> <span class="crumb"><a href="./index.php" data-navbar-reference="index"><i class="icon fa-home fa-fw" aria-hidden="true"></i><span>Latest Answers</span></a></span> </li> <li class="rightside">All times are <span title="America/Chicago">UTC-05:00</span></li> <li class="rightside"> <a href="/user/delete_cookies" data-ajax="true" data-refresh="true" role="menuitem"> <i class="icon fa-trash fa-fw" aria-hidden="true"></i><span>Delete cookies</span> </a> </li> </ul> </div> </div> <div class="copyright"> <p class="footer-row"> <span class="footer-copyright">Powered by <a href="https://www.phpbb.com/">phpBB</a>® Forum Software © phpBB Limited </a></span> </p> <p class="footer-row" role="menu"> <a class="footer-link" href="./ucp.php?mode=privacy" title="Privacy" role="menuitem"> <span class="footer-link-text">Privacy</span> </a> | <a class="footer-link" href="./ucp.php?mode=terms" title="Terms" role="menuitem"> <span class="footer-link-text">Terms</span> </a> </p> <p class="footer-row"> <span class="footer-info"><span title="SQL time: 0.011s / PHP time: 0.063s">Time: 0.074s</span> | Peak Memory Usage: 11.59 MiB | GZIP: On</span> </p> </div> <div id="darkenwrapper" class="darkenwrapper" data-ajax-error-title="AJAX error" data-ajax-error-text="Something went wrong when processing your request." data-ajax-error-text-abort="User aborted request." data-ajax-error-text-timeout="Your request timed out; please try again." data-ajax-error-text-parsererror="Something went wrong with the request and the server returned an invalid reply."> <div id="darken" class="darken"> </div> </div> <div id="phpbb_alert" class="phpbb_alert" data-l-err="Error" data-l-timeout-processing-req="Request timed out."> <a href="#" class="alert_close"> <i class="icon fa-times-circle fa-fw" aria-hidden="true"></i> </a> <h3 class="alert_title"> </h3><p class="alert_text"></p> </div> <div id="phpbb_confirm" class="phpbb_alert"> <a href="#" class="alert_close"> <i class="icon fa-times-circle fa-fw" aria-hidden="true"></i> </a> <div class="alert_text"></div> </div> </div> </div> <div> <a id="bottom" class="anchor" accesskey="z"></a> <img class="sr-only" aria-hidden="true" src="/cron/cron.task.text_reparser.poll_option" width="1" height="1" alt=""> </div> <script src="./assets/javascript/jquery-3.7.1.min.js?assets_version=208"></script> <script src="./assets/javascript/core.js?assets_version=208"></script> <script src="./assets/cookieconsent/cookieconsent.min.js?assets_version=208"></script> <script> if (typeof window.cookieconsent === "object") { window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#0F538A" }, "button": { "background": "#E5E5E5" } }, "theme": "classic", "content": { "message": "This\u0020website\u0020uses\u0020cookies\u0020to\u0020ensure\u0020you\u0020get\u0020the\u0020best\u0020experience\u0020on\u0020our\u0020website.", "dismiss": "Got\u0020it\u0021", "link": "Learn\u0020more", "href": "./ucp.php?mode=privacy" } }); }); } </script> <script src="./styles/prosilver/template/forum_fn.js?assets_version=208"></script> <script src="./styles/prosilver/template/ajax.js?assets_version=208"></script> </body> </html>