Selecting table cells based on class using jQuery

Question

I have a layout similar to this:

<tr>
    <td class="topCategoryRow"><a href="javascript:void(0);" class="catlink">Some Category</a></td>
</tr>
<tr>
    <td class="subCategoryRow">A sub category under Some Category</td>
</tr>
<tr>
    <td class="subCategoryRow">Another sub category under Some Category</td>
</tr>
<tr>
    <td class="topCategoryRow"><a href="javascript:void(0);" class="catLink">Another Category</a></td>
</tr>
<tr>
    <td class="subCategoryRow">A sub category under Another Category</td>
</tr>
<tr>
    <td class="subCategoryRow">Another sub category under Another Category</td>
</tr>

What I'm trying to do is attach a click handler on catLink classes. I want to be able to select the subCategoryRows under the topCategoryRows:

<script type="text/javascript">
    $(function() {
        $(".catLink").click(function() {
            $(".subCategoryRow").show(); // This selector is wrong
        });
    });
 </script>

The code I have selects ALL subCategoryRow's. I want to select only the ones under the category selected. Can someone help me build the correct selector?

Perhaps your classes would be better attached to the <tr>s and not the <td>s? — GriffeyDog
– GriffeyDog, Commented Nov 25, 2013 at 17:03

Arun P Johny · Accepted Answer · 2013-11-25 16:56:11Z

3

Try

$(function() {
    $(".catlink").click(function() {
       $(this).closest('tr').nextUntil("tr:has(.catlink)").find('.subCategoryRow').show();
    });
});

Demo: Fiddle

note: class names are case sensitive - you have used catlink and catLink

answered Nov 25, 2013 at 16:56

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Icemanind Over a year ago

This works, except for the last item though. Keep in mind that there will be no more "catlink" tags after the last one.

Arun P Johny Over a year ago

@icemanind you are using the class name as catLink for the second item that is the problem change it to catlink checkout the fiddle

Rajaprabhu Aravindasamy · Accepted Answer · 2013-11-25 17:11:36Z

0

Try this too.

$(function() {
    $(".catLink").click(function() {
        var xCurrentObj = $(this).closest('tr');
        $('.subCategoryRow').filter(function(){
            return ($(this).parent().index() > xCurrentObj.index());
        }).show();
    });
});

DEMO

edited Nov 25, 2013 at 17:11

answered Nov 25, 2013 at 17:05

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Collectives™ on Stack Overflow

Selecting table cells based on class using jQuery

2 Answers 2

2 Comments

DEMO

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related