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

Question

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

If I am not wrong then `toggleClass` is working only for the last row? — Sandeep Nayak, Oct 12 '15 at 04:56
`$('.show-fewer-or-more-scores').click(function ( ) { var otherRows = $(this).closest('tbody').children('tr:not(#first-score-row)'); for (var k = 1, n = otherRows.length; k < n; ++k) { otherRows.eq(k).toggleClass('hidden'); } });` — Rajarshi Das, Oct 12 '15 at 04:58
Something like this: `setTimeout(toggleClass(k), k * 200 ); function toggleClass(k){ return otherRows.eq(k).toggleClass('hidden'); }` Put the `toggleClass` outside the loop — Sandeep Nayak, Oct 12 '15 at 04:58

Roko C. Buljan · Accepted Answer · 2015-10-12T05:12:11.633

3

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
  });
});

edited Oct 12 '15 at 05:12

answered Oct 12 '15 at 05:03

Roko C. Buljan

196,159
39
305
313

Will `el` not be undefined by the time the timeout executes here? – azz Oct 12 '15 at 05:11
@DerFlatulator no, cause it's passed by the `.filter()` argument. – Roko C. Buljan Oct 12 '15 at 05:12
TIL, I think. I usually use function `.bind` in similar cases. – azz Oct 12 '15 at 05:19

score 1 · Answer 2 · answered Oct 12 '15 at 05:17

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/

Pragatheeswaran · Answer 3 · 2015-10-13T04:00:38.143

1

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.

edited Oct 13 '15 at 04:00

answered Oct 12 '15 at 05:26

Pragatheeswaran

120
1
9

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

3 Answers3