所以我有一段像
这样的HTML<form action="/AssetBundle/DownloadFile" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#masterLinkHolder" id="form0" method="post"></form>
<table>
<tr>
<td>someimage.png</td>
<td><img src="imageicon.png"></td>
<td><button type="button">Click to Download</button></td>
</tr>
<tr>
<td>somedocument.docx</td>
<td><img src="docicon.png"></td>
<td><button type="button">Click to Download</button></td>
</tr>
</table>
<input type="hidden" id="file2Download" />
</form>
当点击button时，我想将输入的value设置为id file2Download作为文件名（例如someimage.png，来自与按钮相同的somedocument.docx的{{1}}}，然后提交表单。所以我需要帮助填写
tr以正确的方式。我知道我正在看一棵像
这样的树<script type="text/javascript">
$('button').click(function () {
$('#file2Download').val(
// ... ?
);
$('#id0').submit();
});
</script>
并尝试从 tr
/ | \
td td td
| \
img button
转到祖父母button，然后转到tr的第一个孩子。
答案 0 :(得分：8)
接受的答案是第二个最慢的建议。
vanilla javascript和jQuery之间的区别很大。
有许多方法可以给猫皮肤，或找一个祖父母第一个孩子。
尽可能使用vanilla javascript。
以下是目前建议的所有方法的jsPerf results。请记住，操作/秒更高的数字更好，我已经将它们从最快到最慢排序
Element.parentNode.parentNode.firstElementChild.textContent;
@canon
（Demo）
characters = 60
ops / sec = 3,239,703
Element.parentNode.parentNode.children[0].textContent;
@canon
（Demo）
characters = 54
ops / sec = 1,647,235
Element.parentNode.parentNode.cells[0].textContent;
@canon
（Demo）
characters = 51
ops / sec = 1,558,070
Element.parentNode.parentNode.querySelector('td:first-child').textContent;
@Tiny Giant
（Demo）
characters = 74
ops / sec = 1,189,826
document.getElementById(Element.dataset.select).textContent;
@ guest271314
（Demo）
characters = 60
ops / sec = 800,876
$('#' + $(Element).data('select')).text();
@ guest271314
（Demo）
characters = 42
ops / sec = 47,144
$('td:first-child',Element.parentNode.parentNode).text();
@Tiny Giant
（Demo）
characters = 57
ops / sec = 18,305
$(Element).parent().siblings(":eq(0)").text();
@ guest271314
（Demo）
characters = 46
ops / sec = 17,633
$(Element).closest('tr').find('td:first').text();
@ j08691
（Demo）
characters = 49
ops / sec = 4,511
$(Element).parentsUntil('table').find('td:first').text();
@AlvaroMontoro
（Demo）
characters = 54
ops / sec = 3,954
前五种方法都使用vanilla javascript，其中最后五种使用jQuery。即使是最快的jQuery解决方案，操作/秒的下降也非常显着。最慢的vanilla方法与最快的jQuery方法之间的区别使得jQuery方法的速度是vanilla方法的1/17。
正如您所看到的，接受的答案是第二慢的。在这种情况下，我会警告不要使用最接近的。你可以越快地运行它，并且最接近只会把它变成一个猜谜游戏。
这只是显示，虽然输入可能需要更多时间，总是会更快来使用vanilla javascript。什么是更好的，默认包括vanilla javascript！
答案 1 :(得分：5)
获得必要的祖父母的第一个孩子的最优雅和有效的方法是使用普通的旧javascript。在这种特殊情况下，您已经确切地知道了获取所需值的确切位置。只需通过自己明确地导航DOM来获取它：
$("button").click(function(e) {
var el = this // button
.parentNode // parent
.parentNode // grandparent
.firstElementChild; // grandparent's first child
console.log(el.textContent);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>someimage.png</td>
<td><button type="button">Click to Download</button></td>
</tr>
<tr>
<td>somedocument.docx</td>
<td><button type="button">Click to Download</button></td>
</tr>
</table>
这和你一样快。可比较的jQuery代码实际上是much, much slower，即：≤4.2％的速度。从jQuery解决方案中获得的所有可能获得的只是几个字符。故事的寓意是，不要害怕在jQuery环境中使用vanilla javascript 。在有意义的地方使用其中一个或两个。
现在，如果您不确定目标元素在参考元素祖先中的位置，请查看closest()：
对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。
var text = $(this).closest("tr").find("td:first-child").text();
$("button").click(function(e) {
var text = $(this).closest("tr").find("td:first-child").text();
console.log(text);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>someimage.png</td>
<td><button type="button">Click to Download</button></td>
</tr>
<tr>
<td>somedocument.docx</td>
<td><button type="button">Click to Download</button></td>
</tr>
</table>
答案 2 :(得分：2)
$('#file2Download').val(
$(this).closest('tr').find('td:first').text()
);
.closest()会将DOM从按钮带到最近的表格行（<tr>），然后.find('td:first').text()将搜索DOM并获取第一个表格单元格的文本内容。
顺便说一句，我认为你的例子中并不是$('#id0')，因为你的表单的ID是form0，可以通过$('#form0')选择。
答案 3 :(得分：1)
$('#file2Download').val(
$(this).parent().siblings(":eq(0)").text()
);
$('button').click(function () {
$('#file2Download').val(
$(this).parent().siblings(":eq(0)").text()
);
console.log($("#file2Download").val())
//$('#id0').submit();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#masterLinkHolder" id="form0" method="post"></form>
<table>
<tr>
<td>someimage.png</td>
<td><img src="imageicon.png"></td>
<td><button type="button">Click to Download</button></td>
</tr>
<tr>
<td>somedocument.docx</td>
<td><img src="docicon.png"></td>
<td><button type="button">Click to Download</button></td>
</tr>
</table>
<input type="hidden" id="file2Download" />
</form>
注意，请参阅https://stackoverflow.com/a/30336313/
另一种方法是向data-*元素添加button属性，向id添加td;然后可以根据点击的按钮td
data-id="first-td"
HTML
<form action="/AssetBundle/DownloadFile" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#masterLinkHolder" id="form0" method="post"></form>
<table>
<tr>
<td id="select1">someimage.png</td>
<td><img src="imageicon.png"></td>
<td><button type="button" data-select="select1">Click to Download</button></td>
</tr>
<tr>
<td id="select2">somedocument.docx</td>
<td><img src="docicon.png"></td>
<td><button type="button" data-select="select2">Click to Download</button></td>
</tr>
</table>
<input type="hidden" id="file2Download" />
</form>
JS
$("#file2Download").val(document.getElementById(this.dataset.select).textContent)
答案 4 :(得分：0)
让我们了解一下在考虑最可靠和最可靠的问题时可能出现的问题。有效的方式。我将在这里简要地写一下关于nearest（）和parent（）函数的内容，以便向任何读者说明使用的内容，时间和原因。
nearest（）获取匹配选择器的第一个元素，一个我们传递给函数的jQuery对象，通过测试给定的jQuery对象并遍历DOM树寻找它的祖先。
parent（）在DOM树中传递单个元素，并选择作为给定jQuery对象的父元素的immediate元素。
他们之间的区别是显着的，尽管它们看起来的功能与它们遍历DOM树的方式类似。
的差异：
nearest（） - 从当前元素开始。向上移动DOM树，直到找到所提供选择器的匹配项。返回的jQuery对象包含原始集中每个元素的零个或一个元素，按文档顺序
parent（） - 从父元素开始。将DOM树移动到文档的根元素，将每个祖先元素添加到临时集合中;然后，如果提供了一个选择器，它会根据选择器过滤该集合。返回的jQuery对象包含原始集中每个元素的零个或多个元素，反向文档顺序。
因此，父级将在计算上提供更快的搜索，因为它的性质是在父级树结构中上升一级。请记住，这是因为我们正在寻找祖父母。
有关实施的详细信息，请参阅jQuery documentation。