javascript 等价于 jquery 最接近().find()

Question

<tr>
    <td><input type="text" class="rate" oninput="priceChanged(this)"> </td>
    <td><input type="text" class="quantity"></td>
    <td><input type="text" class="total"> </td>
</tr>

I can find the quantity textbox with jquery-

var quantityTextbox = $('.rate').closest('tr').find('.quantity');

I would like to do it now with pure javascript.

I am newcomer in the pure javascript world. Any idea?

Answer 1

You can use querySelector & .closest() for this like:

 var quantityTextbox = document.querySelector('.rate').closest('tr').querySelector('.quantity') console.log(quantityTextbox.value)

 <table> <tr> <td><input type="text" class="rate" oninput="priceChanged(this)"> </td> <td><input type="text" class="quantity" value="10"></td> <td><input type="text" class="total"> </td> </tr> </table>

---

If you are calling this inside priceChanged() function, then you can use:

function priceChanged(rate){
    var quantityTextbox = rate.closest('tr').querySelector('.quantity')
}

as you are already passing this inside priceChanged() function.

 function priceChanged(rate) { var quantityTextbox = rate.closest('tr').querySelector('.quantity') console.log(quantityTextbox.value) }

 <table> <tr> <td><input type="text" class="rate" oninput="priceChanged(this)"> </td> <td><input type="text" class="quantity" value="10"></td> <td><input type="text" class="total"> </td> </tr> </table>