Come aggiungere un incremento (1) al valore di un elemento con JQuery

Question

<span id="shortfall" style="color:black">$row[shortfall]</span> 

Come aumentare $ row [insufficienza] a $ row [insufficienza] +1 con JQuery?

Answer 1

È necessario parseInt per gestire le stringhe come numeri.

$("#shortfall").text(parseInt($("#shortfall").text()) + 1); 

Answer 2

Nel momento in cui arriva al browser, la tua espressione sarà stata valutata e trasformata in un numero. Per usare jQuery devi semplicemente ottenere il valore del testo dello span, convertirlo in un numero, quindi sostituire il valore del testo. Dovrai convertire il valore in un numero prima di eseguire l'aggiunta o eseguirà concatenazione di stringhe.

$("#shortfall").each(function() { 
    $(this).text(Number($(this).text()) + 1); 
}); 

Aggiornato: sto usando ciascuno per mostrare come si dovrebbe fare questo usando un selettore generica che potrebbe accettare un insieme di ingressi. Nel tuo caso, se sai che corrisponde esattamente a un elemento, potresti ottimizzarlo con il rischio di doverlo riscrivere se vuoi che il codice si applichi a più elementi.

var span = $("#shortfall"); 
span.text(Number(span.text()) + 1); 

Aggiornato: necessità di utilizzare il testo() (o html()), in quanto l'elemento è uno SPAN, non un input.

Answer 3

$(document).ready(function(){ 
 
    $("#increment").click(function(){ 
 
    $(".sl-no").html(function(){ 
 
     $(this).html(parseInt($(this).html())+1); 
 
    }); 
 
    }); 
 
});

table { 
 
    font-family: arial, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
td, th { 
 
    border: 1px solid #dddddd; 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 

 
tr:nth-child(even) { 
 
    background-color: #dddddd; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <button id='increment'>Click to Increment</button> 
 
<table> 
 
    <tr> 
 
    <th>Sl</th> 
 
    <th>Company</th> 
 
    <th>Contact</th> 
 
    <th>Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td class='sl-no'>1</td> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Maria Anders</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td class='sl-no'>2</td> 
 
    <td>Centro comercial Moctezuma</td> 
 
    <td>Francisco Chang</td> 
 
    <td>Mexico</td> 
 
    </tr> 
 
    <tr> 
 
    <td class='sl-no'>3</td> 
 
    <td>Ernst Handel</td> 
 
    <td>Roland Mendel</td> 
 
    <td>Austria</td> 
 
    </tr> 
 
    <tr> 
 
    <td class='sl-no'>4</td> 
 
    <td>Island Trading</td> 
 
    <td>Helen Bennett</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td class='sl-no'>5</td> 
 
    <td>Laughing Bacchus Winecellars</td> 
 
    <td>Yoshi Tannamuri</td> 
 
    <td>Canada</td> 
 
    </tr> 
 
    <tr> 
 
    <td class='sl-no'>6</td> 
 
    <td>Magazzini Alimentari Riuniti</td> 
 
    <td>Giovanni Rovelli</td> 
 
    <td>Italy</td> 
 
    </tr> 
 
</table>