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 — ggorlen
– ggorlen, Commented May 6, 2021 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
– Lawrence, Commented May 6, 2021 at 16:29
document.querySelector isn't the equivalent of $row.find. Please include some html and context - eg what's this? — fdomn-m
– fdomn-m, Commented May 6, 2021 at 16:38
The link above and youmightnotneedjquery.com gives something like, probably: var text = this.closest("tr").querySelector(".nr").textContent Edit: yep, that seems to work ok: jsfiddle.net/2pcavnsj - but it is really a duplicate — fdomn-m
– fdomn-m, Commented May 6, 2021 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
– Lawrence, Commented May 6, 2021 at 16:43

Prisoner ZERO · Accepted Answer · 2021-05-06 16:52:09Z

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.

Collectives™ on Stack Overflow

From JQuery to Javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related