Question

我正在尝试选择一个嵌套表来使用jQuery显示一些表格数据但由于某种原因它只是不想工作。这件事通常很直接，但它打败了我！

这是我的HTML：

<table class="data canexpand" width="100%" cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <th width="25px">&nbsp;</th>
                    <th>Training/Qualification</th>
                    <th>Category</th>
                    <th>Multiple Dates?</th>
                    <th>&nbsp;</th>
                    <th>&nbsp;</th>
                </tr>
                <tr>
                    <td><div class="expand"></div></td>
                    <td>Example training course</td>
                    <td>Energy</td>
                    <td>Yes</td>
                    <td>&nbsp;</td>
                    <td><a href="#" title="Edit" class="button orange xsmall">Edit</a></td>
                </tr>
                <tr class="nested houdini">
                    <td colspan="6">
                        <table class="data" width="100%" cellpadding="0" cellspacing="0">
                            <tbody>
                                <tr>
                                    <th width="25px">&nbsp;</th>
                                    <th>Course date</th>
                                    <th>Course location</th>
                                    <th>Attending</th>
                                    <th>Availability</th>
                                    <th>&nbsp;</th>
                                </tr>
                                <tr>
                                    <td>&nbsp;</td>
                                    <td>22/12/12</td>
                                    <td>Birmingham NEC</td>
                                    <td>23</td>
                                    <td>27</td>
                                    <td><a href="#" class="button green xsmall" title="Print delegate list">Print delegate list</a></td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>

这是我的jQuery：

/* Add accordian functionality to data tables */
$('table.canexpand .expand').click(function() {
    $(this).parents().next('tr.nested').toggleClass('houdini');
});

请原谅我，如果这完全是错误的选择器使用但我已经尝试了所有组合中的所有parent（），parents（），next（），find（）等。只是不能得到这一个！有人可以帮忙吗？

Answer 1

$(this).closest('tr').next('tr.nested')

或

$(this).closest('tr').siblings('tr.nested')

Answer 2

您还可以在a中添加隐藏的.expand标记，然后将href设置为目标元素的id以进行折叠。例如：

<tr>
  <td><div class="expand"><a class='hidden' href='#foobar'></a></div></td>
  <td>Example training course</td>
  <td>Energy</td>
  <td>Yes</td>
  <td>&nbsp;</td>
  <td><a href="#" title="Edit" class="button orange xsmall">Edit</a></td>
</tr>
<tr id='foobar' class="nested houdini">

然后使用：

$('.expand').bind('click', function() {
  $($(this).find('a').attr('href')).toggleClass('houdini');
  return false;
}

当然，根据需要添加错误检查。这样，你的jQuery很少依赖于你的标记结构，所以当你以后必须调整你的标记时，代码就不那么脆弱了。

什么是正确的jQuery选择器？

2 个答案: