javascript - 在 JQuery 中获取祖 parent 的第一个 child 的最优雅、可靠和高效的方法是什么？

Question

我有一段 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>

当单击按钮时，我想将带有id file2Download 的输入的value设置为是来自与按钮相同的 tr 的文件名(例如 someimage.png、somedocument.docx)，然后提交表单。所以我需要帮助填写

<script type="text/javascript">
    $('button').click(function () {
        $('#file2Download').val(
           // ... ?
        );
        $('#id0').submit();
    });
</script>

以正确的方式。我知道我正在看一棵树

               tr
           /   |    \ 
          td   td    td
               |      \
              img     button

并尝试从 button 转到祖 parent tr，然后转到 tr 的第一个 child 。

Answer 1

tl;dr

接受的答案是第二慢的建议。

vanilla javascript 和 jQuery 之间的区别是巨大的。

剥猫皮或找到祖 parent 第一个 child 的方法有很多种。

尽可能使用 vanilla javascript。

结果

这是 jsPerf results到目前为止建议的所有方法。请记住，ops/sec 的数字越大越好，我已经将它们从最快到最慢排序

1. Element.parentNode.parentNode.firstElementChild.textContent;

   @佳能
   ( Demo )
   字符数 = 60
   操作/秒 = 3,239,703

2. Element.parentNode.parentNode.children[0].textContent;

   @佳能
   ( Demo )
   字符 = 54
   操作/秒 = 1,647,235

3. Element.parentNode.parentNode.cells[0].textContent;

   @佳能
   ( Demo )
   字符 = 51
   操作/秒 = 1,558,070

4. Element.parentNode.parentNode.querySelector('td:first-child').textContent;

   @小巨人
   ( Demo )
   字符数 = 74
   操作/秒 = 1,189,826

5. document.getElementById(Element.dataset.select).textContent;

   @guest271314
   ( Demo )
   字符数 = 60
   操作/秒 = 800,876

6. $('#' + $(Element).data('select')).text();

   @guest271314
   ( Demo )
   字符 = 42
   操作/秒 = 47,144

7. $('td:first-child',Element.parentNode.parentNode).text();

   @小巨人
   ( Demo )
   字符 = 57
   操作/秒 = 18,305

8. $(Element).parent().siblings(":eq(0)").text();

   @guest271314
   ( Demo )
   字符 = 46
   操作/秒 = 17,633

9. $(Element).closest('tr').find('td:first').text();

   @j08691
   ( Demo )
   字符数 = 49
   操作/秒 = 4,511

10. $(Element).parentsUntil('table').find('td:first').text();

    @AlvaroMontoro
    ( Demo )
    字符 = 54
    操作/秒 = 3,954

前五个方法都使用 vanilla javascript，而后五个方法使用 jQuery。即使是最快的 jQuery 解决方案，ops/sec 也有非常显着的下降。最慢的 vanilla 方法与最快的 jQuery 方法之间的差异使 jQuery 方法的速度只有 vanilla 方法的 1/17。

如您所见，接受的答案是第二慢的。我会警告不要在这种情况下使用 closest 。你越具体，它运行的速度就越快，而最接近的只是把它变成了一个猜谜游戏。

这只是为了表明，虽然打字可能需要更多时间，但使用普通 javascript 总是会更快。更好的是，默认情况下包含普通 javascript!