JQuery 使用最接近的 ("element.class")

Question

我正在尝试找到也与特定类名匹配的最接近的 tr。选择器不返回任何匹配项。我不明白什么？

例如:

<table>
<tbody class="category" id="cat-1">
<tr class="category-head">
  <th>Category 1</th>
</tr>
  <tr class="category-item">
    <th>Item 1</th>
  </tr>
  <tr>
    <td>This is a description of category item 1</td>
  </tr>
  <tr>
    <td><input type="text" name="c1_i1_input" id="c1_i1_input" class="category-item-input" /></td>
  </tr>
   <tr class="category-item">
    <th>Item 2</th>
  </tr>
  <tr>
    <td>This is a description of category item 2</td>
  </tr>
  <tr>
    <td><input type="text" name="c1_i2_input" id="c1_i2_input" class="category-item-input" /></td>
  </tr>
  </tbody>
</table>

<script type="text/javascript">
    $(document).ready(function () {
        $(".category-item-input").change(function () {
           //this works, returning the closest tr
            alert($(this).closest("tr").html());

            //this returns null?
            alert($(this).closest("tr.category-item").html());
        });

    });</script>

Answer 1

Closest 查找最近的祖先元素，而不是 DOM 中最近的元素。在您的情况下，包含输入的 tr 没有该类，因此选择器失败。您可能想要找到最接近的 tr，然后找到该 tr 与该类的前一个同级。

$(this).closest('tr').prevAll('tr.category-item:last');