Thursday, April 21, 2011

jquery - go to next table row based on class name from current row location?

I can get the current row using this code. The "this" is a link in a table cell in the row.

$currentTR = $(this).parents('tr');

These next two lines can do the same thing, get the tr after the current row.

$nextTR = $(this).parents('tr').next();  
$nextTR = $(this).parents('tr').next('tr');

If I output $nextTR.html() I see what I expect

I don't know how many rows I need to go to get to the correct row except by class name and doing it like this doesn't work for me.

$nextTR = $(this).parents('tr').next('.concept');  
$nextTR = $(this).parents('tr').next('tr .concept');

All I get is null

The example on docs.Jquery link text uses this

$("p").next(".selected").css("background", "yellow");

What am I missing here?

From stackoverflow
  • You want to get the next one that is of a certain class?

    You could try doing .next() and then checking the class perhaps?

    I'm slightly confused about your question, i'll admit, because you seem to have provided your own answer ...

  • Give nextAll a shot.

    hobbs : Crap, I was going to come up with a fancy solution using the new `index` function, but `$(this).closest('tr').nextAll('tr.concept').eq(0) seems like a winner`. :)
    Breadtruck : So this makes sense. Does nextAll go to the bottom of the page from current position and then start back at the top of the dom and come back to the start position, and that is how many elements get returned?
    Andy Gaskell : @Breadtruck - no. In your example nextAll returns all rows after the "current" row.
  • I've tried to recreate your html + javascript at jsbin and I can reproduce the problem:

    siblings() returns all 4 rows, and I can see that two of the rows have class="concept", but next('.concept') does not return anything.

    screenshot from firebug: siblings works ok, next doesnt

    Isn't next() supposed to be a subset of siblings() ?


    thanks for the comment, now I get it! I need silbings, not next.

    silbing and filter

    Andy Gaskell : next only returns the next element. If the selector you send into your call to next doesn't match the next element your result set will be empty.

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.