使用jQuery在一个元素与其祖先之一之间选择元素的最佳方法是什么

Question

我有一系列的嵌套表（假设我无法更改其结构），我需要选择最外面的td。

测试HTML

<table>
    <tr>
        <td>
            <table class="relevanttable">
                <tr>
                    <td>one</td>
                    <td>two</td>
                    <td>
                        the important td
                        <table>
                            <tr>
                                <td>three - one</td>
                                <td>three - two <input id="targetinput" /></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

JS：

var relevant_field = $('#targetinput');
var target_table = relevant_field.closest('.relevanttable');
// I want something like this
var important_cell = last_selected.closest('.relevanttable > tr > td');

我想我可以使用related_field.parentsUntil（'。tableanswer'，'td'）做到这一点，然后找出哪个项目离它最远，但是我想知道是否有更好的方法对此进行攻击并立即选择确切的方法我很感兴趣。这是一个简单的示例，但是可能有多个表彼此嵌套，而最外面的表可能不是我关注的那个表。

根据前几条评论/答案进行更新：

$('#targetInput').parents('td').last()

不太正确，因为嵌套的数量可能比我的示例中显示的要多。 那就是table> table> table.relevanttable（这个不重要，只有最接近的）> table.relevanttable> table> table> ...> td

另外，为了提供一些上下文，将基于用户交互将数据写入表。 由于是用户交互，因此无法提前知道什么是重要的。 table.relevanttable中可能有一个table.relevanttable，但仅应使用最接近的一个。 可以将其视为将数据粘贴到Excel中，除了一些excel单元格包含整个工作表。 是Excel遇到Inception。

Answer 1

实际上，您可以执行与示例非常相似的操作。 您只需要考虑浏览器会添加一个tbody无论是否添加。

$('#targetinput').closest('.relevanttable > tbody > tr > td');

http://jsfiddle.net/d7Zqf/1/

我找不到可靠的消息来源，其中提到哪些浏览器可以添加和不添加tbody 。 我希望所有现代浏览器都可以。 我测试了IE9和当前的FF。

Answer 2

我个人建议，尽管尚未经过测试：

$('#relevant_field').parents('td').last();

参考文献：

• last() 。
• parents() 。