javascript - 检测特定元素的位置

Question

假设我连续有三个按钮，最后一个是“致命”按钮。有没有一种方法可以让我点击按钮 1，它会告诉我它距离“致命”按钮有 2 个元素？或者点击按钮 2，它会告诉我它距离“致命”按钮 3 已经有一段距离了。

我不确定我是否已经很好地解释了这一点，因此我将链接一个设置示例。

我希望做一些类似于扫雷的方式来检测“地雷”。

HTML

<table>
    <tr>
        <td><button id="1">Button 1</button></td>
        <td><button id="2">Button 2</button></td>
        <td><button id="3">Button 3</button></td>
    </tr>
    <tr>
        <td><button id="4">Button 4</button></td>
        <td><button id="deadly">Button 5</button></td>
        <td><button id="6">Button 6</button></td>
    </tr>  
    <tr>
        <td><button id="7">Button 7</button></td>
        <td><button id="8">Button 8</button></td>
        <td><button id="9">Button 9</button></td>
    </tr> 
</table>  

我目前正在使用 JQuery，因此任何使用它的解决方案仍然适用于我。

FIDDLE

Answer 1

最简单的是，您可以使用 cellIndex <td>的属性(property)其中 <button> 的元素附上:

$('button').click(function(e){
    e.preventDefault();
    var self = $(this),
        cellIndex = self.closest('td').prop('cellIndex'),
        lastCell = self.closest('tr').find('td:last-child').prop('cellIndex'),
        delta = Math.abs(lastCell - cellIndex);
    console.log( delta + (delta === 1 ? ' cell' : ' cells') + ' away from deadly cell');
});

JS Fiddle demo .

引用文献:

• closest() .
• find() .
• prop() .