From JQuery to Javascript

Question

What's the javascript equivalent of the following jquery line?

Javascript Context:

var $row = $(this).closest("tr");    // Find the row
var $text = $row.find(".nr").text(); // Find the text

HTML Context (Table):

        <tr>
            <td class="nr"><span>50</span>
            </td>
            <td>Some Street 1</td>
            <td>
                <button class="use-address"> Test </button>
                       
            </td>
        </tr>
        <tr>
            <td class="nr">49</td>
            <td>Some Street 2</td>
            <td>
                <button class="use-address" > Test </button>
            </td>

Does this answer your question? [Vanilla JavaScript .closest without jQuery](https://stackoverflow.com/questions/28406403/vanilla-javascript-closest-without-jquery) — ggorlen, May 06 '21 at 16:23
I tried changing to this: document.querySelector('.nr').closest('tr').text();. It does not work, and I don't know why. — Lawrence, May 06 '21 at 16:29
`document.querySelector` isn't the equivalent of `$row.find`. Please include some html and context - eg what's `this`? — freedomn-m, May 06 '21 at 16:38
The link above and http://youmightnotneedjquery.com/ gives something like, probably: `var text = this.closest("tr").querySelector(".nr").textContent` **Edit**: yep, that seems to work ok: https://jsfiddle.net/2pcavnsj/ - but it is really a duplicate — freedomn-m, May 06 '21 at 16:40
@freedomn-m I have added in the HTML context. It's searching for the column text in the table. Thank you, your solution works! — Lawrence, May 06 '21 at 16:43

score 1 · Accepted Answer · edited May 06 '21 at 16:52

I am assuming your original code looked similar to the following:

$('table').on('click', '.use-address', function() {
  var $row = $(this).closest("tr"); // Find the row
  var text = $row.find(".nr").text().trim(); // Find the text
  console.log(text);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="nr"><span>50</span>
      </td>
      <td>Some Street 1</td>
      <td>
        <button class="use-address"> Test </button>
      </td>
    </tr>
    <tr>
      <td class="nr">49</td>
      <td>Some Street 2</td>
      <td>
        <button class="use-address"> Test </button>
      </td>
    </tr>
  </tbody>
</table>

You should avoid declaring variables with leading $ (dollar signs), unless the value they hold is an actual jQuery element.

The equivalent would be the following:

const handleClick = ({ target }) => {
  if (target.classList.contains('use-address')) {
    const row = target.closest('tr');
    const text = row.querySelector('.nr').textContent.trim();
    console.log(text);
  }
};

document.querySelector('table').addEventListener('click', handleClick);

<table>
  <tbody>
    <tr>
      <td class="nr"><span>50</span>
      </td>
      <td>Some Street 1</td>
      <td>
        <button class="use-address"> Test </button>
      </td>
    </tr>
    <tr>
      <td class="nr">49</td>
      <td>Some Street 2</td>
      <td>
        <button class="use-address"> Test </button>
      </td>
    </tr>
  </tbody>
</table>

Checkout "You might not need jQuery" to see some examples of equivalent plain JS code.

From JQuery to Javascript

1 Answers1