如何使用jQuery查找前一个td元素

Question

我有这样一张表：

<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？谢谢。

- MojtabaSh

---

“prev” 只查看同级元素。你的“previous” td 实际上在另一个父元素（tr）下面，所以你必须向上遍历 DOM 树，然后再向下遍历。 - iCollect.it Ltd

Answer 1

由于元素#space_bet3前面没有同级(<td>)兄弟元素，对它使用prev()将返回空集。

1. 获取<tr>的祖先元素
2. 获取前一个<tr>兄弟元素
3. 获取子元素<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>

- Tushar

Answer 2

你可以尝试这些：

$('#space_bet3').parent('tr').prev().find('td').attr("id");

这可能会对你有所帮助。

- Harsh Sanghani