What is the most elegant, reliable and efficient way to get grandparents for your first child in jQuery?

Question

So I have an HTML snippet like

<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>

and when you click buttonI want to set valuefor the input id file2Downloadas a file name (for example someimage.png, somedocument.docx) from the same tras a button, and then submit the form. Therefore i need help filling out

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

properly. I know that I look at a tree like

               tr
           /   |    \ 
          td   td    td
               |      \
              img     button

and try to switch from buttonto grandparent tr, and then to the first descendant of this tr.

Answer 1

$('#file2Download').val( 
    $(this).closest('tr').find('td:first').text()
);

.closest() DOM (<tr>), .find('td:first').text() DOM .

, , $('#id0') , form0, $('#form0').

Answer 2

TL;DR

.

javascript jQuery .

.

javascript, .

jsPerf . , ops/sec ,

• Element.parentNode.parentNode.firstElementChild.textContent;

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

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

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

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

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

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

  @ | (-)
  characters = 74
  ops/sec = 1,189,826

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

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

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

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

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

  @ | (-)
  characters = 57
  ops/sec = 18,305

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

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

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

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

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

  @AlvaroMontoro
  (-)
  characters = 54
  ops/sec = 3,954

vanilla javascript, jQuery. / jQuery. jQuery jQuery 1/17- .

, . . , , .

, , vanilla javascript. , javascript !

Answer 3

- javascript. , . , DOM :

$("button").click(function(e) {

  var el = this         // button
    .parentNode         // parent
    .parentNode         // grandparent
    .firstElementChild; // grandparent 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>

Hide result

, - . jQuery , , ..: ≤ 4.2% . , jQuery, . : javascript jQuery. , .

, , , 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>

Hide result

Answer 4

$('#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>

Hide result

---

. . fooobar.com/questions/1588871/...

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)

Answer 5

, , . () parent(), , , .

closeest() , , jQuery, , jQuery DOM, .

parent() DOM , jQuery.

, , , , DOM.

:

() - . DOM, . jQuery ,

parent() - . DOM , ; , . jQuery .

Consequently, the parent could provide computationally faster searches due to the nature of the level transition to the parent tree structure. Keep in mind that this is so since we want to find grandfather and grandmother.

See the jQuery documentation for more details on the implementation .