CODEWITHSUNDEEP
jquerycss
Icemanind
Icemanind

Reputation: 48706

Selecting table cells based on class using jQuery

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?

Upvotes: 0

Views: 84

Answers (2)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Try this too.

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

DEMO

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388406

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

Upvotes: 3

Related Questions