Cómo agregar un incremento (1) al valor de un elemento con JQuery

Question

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

Cómo aumentar $ fila [déficit] a $ fila [déficit] +1 con JQuery?

Answer 1

Necesita parseInt para manejar cadenas como números.

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

Answer 2

Cuando llegue al navegador, su expresión habrá sido evaluada y convertida en un número. Para usar jQuery, simplemente obtendría el valor de texto del tramo, conviértalo en un número y luego reemplace el valor del texto. Tendrá que convertir el valor en un número antes de hacer la adición o lo hará concatenación de cadenas.

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

Actualizado: Estoy usando cada uno para mostrar cómo se podría hacer esto mediante un selector genérico que podría aceptar una colección de entradas. En su caso, si sabe que coincide exactamente con un elemento, puede optimizarlo con el riesgo de tener que volver a escribirlo si desea que el código se aplique a múltiples elementos.

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

Actualizado: necesidad de utilizar el texto() (o html()) desde el elemento es un SPAN, no una entrada.

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>