使用 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');

我想我可以用relatiant_field . parentsuntil('。tableanswer'， 'td')，然后找出哪个项目离它最远，但我想知道是否有更好的方法来解决这个问题，并立即选择我感兴趣的确切td。这是一个简单的例子，但是可能有多个表相互嵌套，最外面的表可能不是我关心的那个。

更新对前几个评论/回答的响应:

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

不太正确，因为可能有比我的例子中显示的更多的嵌套。这是table> table> table。相关表(这个并不重要，只有最接近)>表。相关表> table> table>…道明

>

另外，为了提供一些上下文，数据将根据用户交互被写入表。因为这是用户交互，所以我们无法提前知道什么是重要的。可能有一张桌子。表内的相关性。相关的，但只应该使用最接近的一个。可以把它想象成将数据粘贴到Excel中，只是有些Excel单元格包含整个工作表。这是Excel和盗梦空间的结合

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() .