Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    May 2010
    Posts
    79
    Thanks
    15
    Thanked 2 Times in 2 Posts

    jQuery hide trs from last child

    Code:
    <table style="width: 100%; text-align: center; font-size: 11px;">
    <tr> 
    	<th class="date_post"> Rank </th>
    	<th class="date_post"> Name </th>
    	<th class="date_post"> Kills </th>
    	<th class="date_post"> Deaths </th>
    </tr>
    <tr id="LOL"><td>1</td><td>WWWWWWWWWWWWWWWWWWWWWWW</td><td>9999999</td><td>9999999</td></tr>
    <tr id="LOL"><td>2</td><td>Test2</td><td>23</td><td>17</td></tr>
    <tr id="LOL"><td>3</td><td>Test3</td><td>17</td><td>2</td></tr>
    <tr id="LOL"><td>4</td><td>Test4</td><td>12</td><td>503</td></tr>
    <tr id="LOL"><td>5</td><td>Test5</td><td>7</td><td>7</td></tr>
    <tr id="LOL"><td>6</td><td>Test6</td><td>99</td><td>99</td></tr>
    <tr id="LOL"><td>7</td><td>Test7</td><td>99</td><td>99</td></tr>
    <tr id="LOL"><td>8</td><td>Test8</td><td>99</td><td>99</td></tr>
    <tr id="LOL"><td>9</td><td>Test8</td><td>99</td><td>99</td></tr>
    <tr id="LOL"><td>10</td><td>Test8</td><td>99</td><td>99</td></tr>
    <tr id="LOL"><td>11</td><td>Test8</td><td>99</td><td>99</td></tr>
    <tr id="LOL"><td>12</td><td>Test8</td><td>99</td><td>99</td></tr>
    <tr id="LOL"><td>13</td><td>Test8</td><td>99</td><td>99</td></tr>
    <tr id="LOL"><td>14</td><td>Test8</td><td>99</td><td>99</td></tr>
    <tr id="LOL"><td>15</td><td>Test8</td><td>99</td><td>99</td></tr>
    <tr id="rank_2" style="display:none;"><td>16</td><td>Test8</td><td>99</td><td>99</td></tr>
    <tr id="rank_2" style="display:none;"><td>17</td><td>Test8</td><td>99</td><td>99</td></tr>
    <tr id="rank_2" style="display:none;"><td>18</td><td>Test8</td><td>99</td><td>99</td></tr>
    <tr id="rank_2" style="display:none;"><td>19</td><td>Test8</td><td>99</td><td>99</td></tr>
    <tr id="rank_2" style="display:none;"><td>20</td><td>Test8</td><td>99</td><td>99</td></tr>
    <tr id="rank_2" style="display:none;"><td>21</td><td>Test8</td><td>99</td><td>99</td></tr>
    <tr id="rank_2" style="display:none;"><td>22</td><td>Test8</td><td>99</td><td>99</td></tr>
    <tr id="rank_2" style="display:none;"><td>23</td><td>Test8</td><td>99</td><td>99</td></tr>
    <tr id="rank_2" style="display:none;"><td>24</td><td>Test8</td><td>99</td><td>99</td></tr>
    <tr id="rank_2" style="display:none;"><td>25</td><td>Test8</td><td>99</td><td>99</td></tr>
    <tr id="rank_2" style="display:none;"><td>26</td><td>Test8</td><td>99</td><td>99</td></tr>
    <tr id="rank_2" style="display:none;"><td>27</td><td>Test8</td><td>99</td><td>99</td></tr>
    <tr id="rank_2" style="display:none;"><td>28</td><td>Test8</td><td>99</td><td>99</td></tr>
    <tr id="rank_2" style="display:none;"><td>29</td><td>Test8</td><td>99</td><td>99</td></tr>
    <tr id="rank_2" style="display:none;"><td>30</td><td>Test8</td><td>99</td><td>99</td></tr>
    </table><center>Page: <a id="page1">1</a> | <a id="page2">2</a></center>
    
      <button id="hidr">Hide</button>
      <button id="showr">Show</button>
      <div>
    
        <span>Once</span> <span>upon</span> <span>a</span> 
        <span>time</span> <span>there</span> <span>were</span> 
        <span>three</span> <span>programmers...</span>
    
      </div>
    <script>
        $("#hidr").click(function () {
          $("tr:last-child").hide("fast", function () {
            // use callee so don't have to name the function
            $(this).prev().hide("fast", arguments.callee); 
    		$("#rank_2").show();
          });
        });
        $("#showr").click(function () {
                $("tr#HI").show("fast", function () {
            // use callee so don't have to name the function
            $(this).prev().hide("fast", arguments.callee); 
          });
        });
    
    </script>
    i know that the code above answers the title but how to like, only choose #LOL and hide the <tr>s starting from the last child? sorry.
    and is it possible to show the #rank_2 starting from the first child?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    OK, first of all: You can’t have multiple IDs of the same kind in a document, an ID must be unique and may only occur once per document. If you want to have multiple elements with the same designator you need to use classes.

    Then to search something from the last child you can use the prevUntil() function (in combination with jQuery’s :last-child selector) to manipulate nodes from the end until a certain one.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •