Question

我有以下HTML：

<tr>
    <td>
        <input type="checkbox" class="showFilter" /> Ranks
    </td>
</tr>
<tr class="hideFilter">
    <td class="textBold">

        <select class="ranks singleListBox" id="select1" name="selectListFilterRank">
            <option value="all">All</option>
                <% Do While NOT rsGetRanks.EOF %>
                            <option value="<%= rsGetRanks("RankID") %>"><%= rsGetRanks("Description") %></option>

                <%  
                        rsGetRanks.MoveNext
                    Loop          
                %>                  
        </select>
    </td>
</tr>

我有以下JQuery：

$('.showFilter').change(function () {
                if(this.checked) {
                    $(this).parent('tr').next().show();
                } else {
                    $(this).parent('tr').next().hide();
                }

            });

我正在尝试这样做，当他们点击复选框时，它会找到父<tr>，转到下一个<tr>并显示<tr>。

该部分不起作用，由于某种原因，它不会显示<tr>。

所有hideFilter正在做的是将显示设置为none，目前没有其他CSS应该搞乱这个。

Answer 1

parent()选择直接父级，即<td> 使用.closest('tr')选择父行。

此外，使用.toggle()：

可以更快地编写代码

$('.showFilter').change(function() {
    $(this).closest('tr').next().toggle(this.checked);
});

Answer 2

而不是使用 .parent（'tr'），请使用 .parents（'tr'）

父级（[查询]）仅上升1级。
Parents（[query]）搜索所有parentNodes，直到找到您要搜索的内容。

Answer 3

您输入的父级是TD而非TR使用parents()或closest()

http://api.jquery.com/closest/

http://api.jquery.com/parents/

jquery .parent .next。显示不起作用

3 个答案: