在JQuery中获得祖父母的第一个孩子的最优雅,最可靠和最有效的方法是什么？

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>

并且当button被点击我想设置value与输入的id file2Download是文件名(如someimage.png,somedocument.docx从同)tr为按钮,然后提交表单.所以我需要填写帮助

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

以适当的方式.我知道我正在看一棵树

               tr
           /   |    \ 
          td   td    td
               |      \
              img     button

并试图从button祖父母那里去tr,然后再到第一个孩子tr.

Answer 1

TL;博士

接受的答案是第二个最慢的建议.

vanilla javascript和jQuery之间的区别很大.

有很多方法可以给猫皮肤,或者找一个祖父母第一个孩子.

尽可能使用vanilla javascript.

结果

以下是迄今为止建议的所有方法的jsPerf结果.请记住,ops/sec的数字越高越好,我从最快到最慢的顺序排序

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

   @canon
   (Demo)
   characters = 60
   ops/sec = 3,239,703

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

   @canon
   (Demo)
   characters = 54
   ops/sec = 1,647,235

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

   @canon
   (Demo)
   characters = 51
   ops/sec = 1,558,070

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

   @Tiny Giant
   (演示)
   字符= 74
   ops/sec = 1,189,826

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

   @ guest271314
   (Demo)
   characters = 60
   ops/sec = 800,876

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

   @ guest271314
   (Demo)
   characters = 42
   ops/sec = 47,144

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

   @Tiny Giant
   (演示)
   角色= 57
   ops/sec = 18,305

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

   @ guest271314
   (Demo)
   characters = 46
   ops/sec = 17,633

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

   @ j08691
   (演示)
   characters = 49
   ops/sec = 4,511

10. $(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!