jQuery最近的（）到达具有特定类或ID的行上方

Question

以下是一个简化的示例，用于解释我试图理解的内容，即如何使具有特定ID的当前行上方的第一行：

<script>
$(document).ready(function(){
  $("#alphabet").closest("tr']").css({"color": "white", "background-color": "green"}); // finds the same row as expected
  $("#alphabet").closest("tr#number']").css({"color": "white", "background-color": "green"});  // Does NOT find anything
  $("#alphabet").closest("tr:has([class*='num'])").css({"color": "white", "background-color": "green"}); // Does NOT find anything

});
</script>
</head>

<body >body (great-great-grandparent)
  <table>
    <thead>
      <tr>
          <th>col 1</th>
          <th>col 2</th>
      </tr>
  </thead>
    <tbody>
      <tr id='number' class="num">
          <td>1</td>
          <td>2</td>
      </tr>
      <tr id='alphabet'>
          <td>a</td>
          <td>b</td>
      </tr>
    </tbody>
  </table>

</body>

我故意避免使用.next（），prev（）。

Answer 1

尝试：

$("#alphabet").siblings('#number').css(...)

最近是用于将层次结构（例如，从td移至tr）向上移动，而兄弟姐妹则用于在同一级别上移动。

Answer 2

给定一个表示一组DOM元素的jQuery对象，.closest（）方法将在DOM树中搜索这些元素及其祖先，并从匹配的元素构造一个新的jQuery对象。 .parents()和.closest()方法的相似之处在于它们都遍历DOM树。 两者之间的差异虽然微妙

最好使用.parents()或.siblings() 。 .closest()将无法看到该元素，因为在第一步中该元素已经遍历<tbody> 。

 $(function() { $("#alphabet").parent().find("#number").css({ "color": "white", "background-color": "green" }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <thead> <tr> <th>col 1</th> <th>col 2</th> </tr> </thead> <tbody> <tr id='number' class="num"> <td>1</td> <td>2</td> </tr> <tr id='alphabet'> <td>a</td> <td>b</td> </tr> </tbody> </table>

jQuery最近的（）到达具有特定类或ID的行上方

问题描述

2 个解决方案

解决方案1
2 2019-01-06 18:35:10

解决方案2
1 2019-01-06 18:41:56

jQuery最近的（）到达具有特定类或ID的行上方

问题描述

2 个解决方案

解决方案1 2 2019-01-06 18:35:10

解决方案2 1 2019-01-06 18:41:56

解决方案1
2 2019-01-06 18:35:10

解决方案2
1 2019-01-06 18:41:56