CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Donald Knuth
Donald Knuth

Reputation: 145

Am I using eq(...) incorrectly? Or what is wrong here?

I have a block of HTML like

<tbody>
   <tr id="first-score-row">
      <td>Steve Ballmer</td>
      <td>1923</td>
      <td class="hide-under-480px">10/11/2015 9:21:39 PM</td>
   </tr>
   <tr>
      <td colspan="3">
         <p><a class="btn btn-primary btn-lg show-fewer-or-more-scores" id="show-more-scores">Click to See More</a></p>
      </td>
   </tr>
   <tr class="hidden">
      <td>Michael Jackson</td>
      <td>300</td>
      <td class="hide-under-480px">10/6/2015 2:37:30 PM</td>
   </tr>
   <tr class="hidden">
      <td>Weird Al</td>
      <td>180</td>
      <td class="hide-under-480px">10/10/2015 1:20:38 AM</td>
   </tr>
   <tr class="hidden">
      <td>Obama smokes cigs</td>
      <td>60</td>
      <td class="hide-under-480px">10/5/2015 10:28:37 PM</td>
   </tr>
   <tr class="hidden">
      <td>Donald Trump</td>
      <td>60</td>
      <td class="hide-under-480px">10/5/2015 10:28:02 PM</td>
   </tr>
   <tr class="hidden">
      <td colspan="3">
         <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
               <p><a class="btn btn-primary btn-lg show-fewer-or-more-scores" id="show-fewer-scores" target="_blank">See Fewer Scores</a></p>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
               <p><a href="/Scores" class="btn btn-primary btn-lg" target="_blank">See <u>All</u> Scores</a></p>
            </div>
         </div>
      </td>
   </tr>
</tbody>

and I'm trying to make an event that reveals or hides all the rows besides the first one (which will always be revealed) in animated fashion, 1/5th of a second between each one being revaled. My attempted event handler is

// click function for the "See More Scores" and "See Fewer Scores" buttons
$('.show-fewer-or-more-scores').click(function ( )
{
    var otherRows = $(this).closest('tbody').children('tr:not(#first-score-row)');
    for (var k = 0, n = otherRows.length; k < n; ++k)
    {
        setTimeout(function () {
                    otherRows.eq(k).toggleClass('hidden');
                   }, k * 200 );
    }

});

and for some reason it is not working. There are no errors printed to the console, but nothing happens, the class hidden is not toggled. What am I doing wrong here?

Live example here

Upvotes: 3

Views: 86

Answers (3)

Pragatheeswaran
Pragatheeswaran

Reputation: 120

The actual problem is here.

setTimeout(function () {
 otherRows.eq(k).toggleClass('hidden');
}, k * 200 );

The value of k will be equal to the value of n once the for loop is completed. So everytime when this line is called, the k value will be same, but no table row exists with that index value.

You have to get the table row element and then add the method toggleClass to it.

Upvotes: 1

partypete25
partypete25

Reputation: 4413

I replaced your for loop with a jQuery each function.

otherRows.each(function(i){
           setTimeout(function () {
                otherRows.eq(i).toggleClass('hidden');
               }, i * 200 );
});

Dont forget the .hidden class, something like:

.hidden {display:none}

Other than that it works fine.

https://jsfiddle.net/partypete25/nvbraokh/20/embedded/result/

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206347

To target All rows but first one use the :gt(0) selector:

jsBin demo

var $rowsNotFirst = $("table tbody tr:gt(0)");
var $scoresBtn = $(".show-fewer-or-more-scores");


$scoresBtn.click(function(){
  $rowsNotFirst.toggleClass("hidden");
});

To add the timeout:

jsbin demo

$scoresBtn.click(function(){
  $rowsNotFirst.filter(function(idx, el){
    setTimeout(function(){
      $(el).toggleClass("hidden");
    }, 300*idx);                          // 300 * element index
  });
});

Upvotes: 3

Related Questions