Question regarding Selectors

Question regarding Selectors

Hi Everyone,

I'm new to JQuery and I'm trying to figure out a way to select select specific elements on a page that are within a <table></table> ?

Half of my code works and the other half does not work meaning when I don't put my syntax in a table it's working but when I leave it out of a table it's working. I'm not sure what I'm doing wrong here. My first goal is to hide the "#p1" and "#p2" elements inside of the table but I can't figure that out. Any help would be appreciated. Thanks everyone.



<head>
<title>Put something here</title>
</head> 
<body> 


<a href="#" id="paragraph">Click Here</a>

>>>>>>>>>>>>>>>>>>>>>>>>>>> <br>
This works because there isn't a table within the p1, p2 tags but those same tags below that are within a table aren't hiding themselves. <br>
<h1>My Second Paragraph</h1>

<p id="p1">This is Paragraph 1 This is Paragraph 1 This is Paragraph 1 
This is Paragraph 1 This is Paragraph 1 This is Paragraph 1 This is Paragraph 1</p> 

<h1>My Second Paragraph</h1>

<p id="p2">This is Paragraph 2 This is Paragraph 2 This is Paragraph 2 
This is Paragraph 2 This is Paragraph 2 This is Paragraph 2 This is Paragraph 2</p> 
>>>>>>>>>>>>>>>>

<table style="background-color: #CCC" width="100%" border="0" cellpadding="12">
  <tr> 
    <td width="78%"> 
  
<h2> 
  Put Something Here
  <br/>
        Put Something Here As Well
        <p id="p1">This is Paragraph 1 This is Paragraph 1 This is Paragraph 1 
        This is Paragraph 1 This is Paragraph 1 This is Paragraph 1 This is Paragraph 1</p> 
  <br/>
        Put Another Something Here As Well
        <p id="p2">This is Paragraph 2 This is Paragraph 2 This is Paragraph 2 
        This is Paragraph 2 This is Paragraph 2 This is Paragraph 2 This is Paragraph 2</p>
</h2>
    </td>
    <td width="22%"> 
    </td>
    <td width="18%"> 

    </td>
  </tr>
</table>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="mycode9.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="mycode9.js"></script>

</body> 
</html>

>>>>>>>>>>>>>

jQuery
  
  1. $(document).ready(function () {
  2. // notes: I also get a quick flicker when I load the page
  3. // flicker meaning the paragraph info. Not sure why?
  4. // happens in a new browser. New meaning, the page wasn't loaded recently.
  5. // ---------
  6. // notes: when I tried this in IE when I click "Click Here"
  7. // the paragraphs appear quickly but in Chomre and Firefox they
  8. // were slow? Not sure why.
  9. // ---------
  10. // but this seems to work
  11. // What is this doing?
  12. // hides the paragraph tags
  13. // http://api.jquery.com/hide/
  14. // http://www.w3schools.com/jquery/jquery_hide_show.asp
  15. $("#p1").hide();
  16. $("#p2").hide();
  17. // what does this statement mean?
  18. // when you click on "Click here"
  19. // it will show p1 and p2
  20. // http://api.jquery.com/click/
  21. $("#paragraph").click(function () {
  22. // can enter any numeric value here
  23. // number wise, 1000 or 500 would be most practical
  24. // or could enter, 'medium', 'slow', 'fast'
  25. // http://api.jquery.com/slideDown/
  26. $("#p1").slideDown(300);
  27. $("#p2").slideDown(300); /* $("#p1").show(5000); $("#p2").show(5000); */
  28. }); // this statement means when you click on the h1
  29. // statements the paragraphs will show
  30. // the below statement has nothing to do with the above example
  31. // I just felt like adding it in here for fun
  32. $("h1").click(function () {
  33. $(this).next().slideToggle(300);
  34. });
  35. /*
  36. // syntax with no notes
  37. $("#p1").hide();
  38. $("#p2").hide();
  39. $("#paragraph").click(function () {
  40. $("#p1").slideDown(5000);
  41. $("#p2").slideDown(5000);
  42. });
  43. $("h1").click(function () {
  44. $(this).next().slideToggle(300);
  45. });
  46. */
  47. });
[moderator reformatted]