Search code examples
jqueryclasshtml-tablereverseclosest

Find closest table row element with a particular class attribute looking in reverse from current element

I have a JqGrid and want to toggle automatically the display of the last edited row/group when returning to the view/page containing the grid.

The process I have is

  1. Write the last edited OrderId to a session variable on completion of add/edit
  2. Pass this to the view where is is held in a hidden form element

What I would like to do now is use this "id" to locate the nearest (in reverse) grouping table row which I can then use to toggle the display.

The for the OrderId is easily identified since the id"" attribute matches the OrderId.

The grouping element though is 0 indexed and numbered only according to it's position in the grid i.e. it does not relate to the OrderId or OrderLinkId.

24/10/2012 Amended the below example to demonstrate that the group header elements are closed before the individual Order elements ie. siblings not parent/child

<tr id="clientOrderGridghead_0_6" class="ui-widget-content jqgroup ui-row-ltr clientOrderGridghead_0" role="row">
.....Group Header 6 Content.....
</tr>
<tr id="403" class="ui-widget-content jqgrow ui-row-ltr" style="" tabindex="-1" role="row">
</tr>
<tr id="414" class="ui-widget-content jqgrow ui-row-ltr" style="" tabindex="-1" role="row">
</tr>
<tr id="418" class="ui-widget-content jqgrow ui-row-ltr" style="" tabindex="-1" role="row">
</tr>
<tr id="clientOrderGridghead_0_7" class="ui-widget-content jqgroup ui-row-ltr clientOrderGridghead_0" role="row">
......Group Header 7 Content......
</tr>

The example above shows the top element which acts as the group header, with the subsequent 3 elements being the record rows for the related Orders.

The header element always has the class

class="ui-widget-content jqgroup ui-row-ltr clientOrderGridghead_0"

I have been able to successfully do the toggling by hard coding the id of the group element as follows

jQuery('#clientOrderGrid').jqGrid('groupingToggle','clientOrderGridghead_0_6');

But am now struggling to get the id necessary to plug in to the groupingToggle call and make it dynamic.

I've tried the following

var groupId = $('#' + lastOrderId).closest('tr').find('.ui-widget-content jqgroup ui-row-ltr clientOrderGridghead_0').attr('id');

After seeing the example here Using a class name in jQuery's .closest()

But but this returns undefined.

Any pointers greatly appreciated.

24/10/2012 Another attempt

var groupId = $('#' + lastOrderId).closest('tbody').find('.ui-widget-content jqgroup ui-row-ltr clientOrderGridghead_0').attr('id');

But still no joy

Solution

  • I think you should go for

    var groupId = $('#' + lastOrderId).parent().find('.clientOrderGridghead_0').attr('id');

    EDIT: Removed unnecessary classes in find.

    EDIT 2: I couldn't understand your question at the first place.

    Please try this:

    var groupId = $('#' + lastOrderId).prev('.clientOrderGridghead_0').attr('id');

    I seriously hope this works for you this time.