Question

我将jQuery与dataTables插件一起使用。 dataTables提供了一个打开和关闭行的功能（意味着可以在常规行下打开其他信息行）。

从http://datatables.net/api我得到了以下良好的工作示例：

$(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();
} );

现在我想将click处理程序不添加到整行，而是添加到行中的元素：

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

但当然this现在没有引用tr元素，而是引用某个子元素。我尝试更改代码的方法是将this替换为$(this).parent().parent().get()，但这不起作用。

然后我发现实际上this似乎与$(this).get()不一样，即使两者都是[object HTMLElement]个对象，这让我感到惊讶。

有任何建议让这个工作吗？

编辑：我的HTML表格如下所示：

<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

替换

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

带

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

您的职能可能是：

$('#openCompliantsTable .icon-comment').click( function () {
    var tr = $(this).parent().parent().get(0);
    if ( oTable.fnIsOpen(tr) ) {
        oTable.fnClose(tr);
    } else {
        oTable.fnOpen(tr, "Temporary row opened", "info_row" );
    }
} );

另见this example。

Answer 2

不带参数的

.get()会返回一个数组，其中包含所有匹配元素的所有DOM元素。即使你只有一个匹配的元素，你也会得到一个包含一个项目的数组。

使用索引时，.get（）将检索单个元素，这是您所追求的。

你必须使用：

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

Answer 3

或更短：

$(this).parents('tr')[0];

这需要第一个父项为'tr'，嵌套无关紧要，你不必关心你需要加强多少级别。如果你有嵌套表，请小心。

jQuery HTMLElement包装/解包

3 个答案: