使用jQuery捕获下一个/上一个特定属性

Question

我的 HTML 代码是

<table>
    <tr><td>w</td><td data-id='6' class='point'>6</td></tr>
    <tr><td>X</td><td data-id='8' class='point'>8</td></tr>
    <tr><td>Y</td><td data-id='7' class='point'>7</td></tr>
    <tr><td>Z</td><td data-id='10' class='point'>10</td></tr>
</table>

而JS是

$('.point').click(function(){
    alert($(".point").nextAll().attr('data-id:first'));
});

当我点击任何点类时，我希望能够获取前一个或后一个data-id的值。如何在不使用parent()和children()的情况下解决这个问题。我的fiddle演示是Fiddle demo。谢谢。

- Iftakharul Alam

Answer 1

根据您的要求（不使用 "closest"/parent/children/"find"），您可以使用 .eq() 和 .index() 来实现您所需的内容。

请尝试：

var point = $('.point');
point.click(function(){
    alert(point.eq(point.index(this) + 1).attr('data-id'));
});

DEMO

- Rajaprabhu Aravindasamy

---

@prabhu - 很高兴在Stack Overflow上见到你。 - Sudharsan S

Answer 2

首先，您需要使用this引用单击的元素。然后，由于.point元素不是兄弟元素，nextAll()无法正常工作。相反，您需要使用closest()找到父tr，转到下一个tr，然后在其中find().point元素。请尝试这个：

$('.point').click(function(){
    alert($(this).closest('tr').next('tr').find('.point').data('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr><td>w</td><td data-id='6' class='point'>6</td></tr>
    <tr><td>X</td><td data-id='8' class='point'>8</td></tr>
    <tr><td>Y</td><td data-id='7' class='point'>7</td></tr>
    <tr><td>Z</td><td data-id='10' class='point'>10</td></tr>
</table>

- Rory McCrossan