Question

I use jQuery together with the dataTables Plugin.
dataTables provides a feature to open and close a row (means that an additional info-row can be opened under a regular row).

From http://datatables.net/api i got following well working example:

$(document).ready(function() {
    var oTable;

    // 'open' an information row when a row is clicked on
    $('#example tbody tr').click( function () {
        if ( oTable.fnIsOpen(this) ) {
            oTable.fnClose( this );
        } else {
            oTable.fnOpen( this, "Temporary row opened", "info_row" );
        }
    } );

    oTable = $('#example').dataTable();
} );

Now I want to add the click handler not to the whole row, but to a element in the row:

$("#openCompliantsTable .icon-comment").click(…

But of course this now does not refer to the tr element but to some child element. My attempt to change the code was to replace this with $(this).parent().parent().get(), which did not work.

Then i found out that actually this seems not to be the same as $(this).get(), even if both are [object HTMLElement] objects, which surprised me.

Any suggestions to get this working?

EDIT:
My HTML table looks like this:

<table id="openCompliantsTable" class="table table-striped table-bordered table-condensed">
    <thead>
      <tr>
        <th>Reklamationsnummer</th>
        <th>Reklapositionsnummer</th>
        ...
        <th>Status</th>
        <th>Aktion</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>1</td>
        ...
        <td>offen</td>
        <td><i class="icon-ok"></i><i class="icon-trash"></i><i class="icon-flag"></i><i class="icon-comment"></i></td>
      </tr>
      ...
    </tbody>
  </table>

Answer 1

.get() without parameters returns an array with all the DOM element of all the matched elements. Even if you have only one matched element, you’ll get an array with one item.

With an index, .get() will retrieve a single element, which is you’re after.

You have to use:

$(this).parent().parent().get(0)