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 demo谢谢你。

Answer 1

根据您的要求（不要使用“最近的” / parent / children / “找到”），您可以.eq()和{{.index()一起使用1}}实现你所需要的。

尝试，

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

DEMO

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用jquery捕获next / previous特定属性

2 个答案:

DEMO