CODEWITHSUNDEEP
javascriptjqueryhtml
samouray
samouray

Reputation: 578

JQuery - How to find the next occurence of element with specific class

So I have a table like this:

<table id="TblProduits" class="TblProduitsLayout">
    <thead>
        <tbody>
            <tr class="placeholderRow">
                <td>
                    <input class="PrixUnitr" type="number" />
                </td> 
            <tr class="placeholderRow">
            <tr class="placeholderRow SousTotal">
                <td>
                    <input  class="MontnHT" type="text" disabled="disabled"  min="0"/>
                </td>
            <tr class="placeholderRow">
            <tr class="placeholderRow SousTotal">
                <td>
                    <input  class="MontnHT" type="text" disabled="disabled" min="0">
                </td>
    </tbody>
</table>

I want to change the value of the fisrt occurence of the input with classname MontnHT contained inside a tr with classname SousTotal when the value of the input with classname PrixUnitr is changed, so I created an event like this:

$('body').on('change', '.PrixUnitr', function() {       
    $(this).closest('tr').nextAll("tr.SousTotal").find("input.MontnHT").val("foo");
});

My problem is that is also changes the other inputs contained inside a TR with the same classname SousTotal , as I want to change just the first occurence , what am I doing wrong? and how can it be fixed?

Upvotes: 1

Views: 97

Answers (1)

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

use .first() or .eq(0) to get the first occurrence of the element 

 $(this).closest('tr').nextAll("tr.SousTotal").first().find("input.MontnHT:first").val("foo");

or

 $(this).closest('tr').nextAll("tr.SousTotal:eq(0)").find("input.MontnHT:eq(0)").val("foo");

Upvotes: 2

Related Questions