jquery - 如何使用 jquery 查找上一个 td 元素

Question

我有一张这样的 table

<table>
    <tr><td id="space_bet1" height="10"></td></tr>
    <tr><td id="unscr1">Today</td></tr>
    <tr><td id="space_bet2" height="10"></td></tr>
    <tr><td id="unscr2">Tomorrow</td></tr>
    <tr><td id="space_bet3" height="10"></td></tr>
    <tr><td id="unscr3">Yesterday</td></tr>
    <tr><td id="space_bet4" height="10"></td></tr>
    <tr><td id="unscr4">next week</td></tr>
    <tr><td id="space_bet5" height="10"></td></tr>
    <tr><td id="unscr5">next month</td></tr>
    <tr><td id="space_bet6" height="10"></td></tr>
</table>

我想找到space_bet3之前的td，我尝试了prev()方法，但无论如何它都不起作用

alert($("#space_bet3").prev().prev().attr("id"))  // undefined error
alert($("#space_bet3").prev("#space_bet2").attr("id"))  // undefined error

我这样做有什么错吗？如何找到space_bet3之前的id，谢谢

Answer 1

因为元素 <td> 之前没有同级( #space_bet3 ) , prev()它将返回空集。

1. 获取<tr>祖先
2. 获取上一个 <tr> sibling
3. 带上 children <td>
4. 获取id属性值。

代码:

$('#space_bet3')
    .closest('tr') // Get first ancestor `<tr>` element
    .prev() // Get previous element
    .children('td') // Get direct descendant `<td>` element
    .attr('id'); // Get `id` of the element

var id = $('#space_bet3')
  .closest('tr') // Get first ancestor `<tr>` element
  .prev() // Get previous element
  .children('td') // Get direct descendant `<td>` element
  .attr('id'); // Get `id` of the element

console.log(id);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
  <tr>
    <td id="space_bet1" height="10"></td>
  </tr>
  <tr>
    <td id="unscr1">Today</td>
  </tr>
  <tr>
    <td id="space_bet2" height="10"></td>
  </tr>
  <tr>
    <td id="unscr2">Tomorrow</td>
  </tr>
  <tr>
    <td id="space_bet3" height="10"></td>
  </tr>
  <tr>
    <td id="unscr3">Yesterday</td>
  </tr>
  <tr>
    <td id="space_bet4" height="10"></td>
  </tr>
  <tr>
    <td id="unscr4">next week</td>
  </tr>
  <tr>
    <td id="space_bet5" height="10"></td>
  </tr>
  <tr>
    <td id="unscr5">next month</td>
  </tr>
  <tr>
    <td id="space_bet6" height="10"></td>
  </tr>
</table>