Jak dodać przyrost (1) do wartości elementu z JQuery

Question

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

Jak zwiększyć $ wiersz [niedobór] do $ wiersz [niedobór] +1 z JQuery?

Answer 1

Potrzebujesz parseInt do obsługi ciągów jako liczb.

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

Answer 2

Zanim przejdzie do przeglądarki, Twoje wyrażenie zostanie ocenione i przekształcone w liczbę. Aby użyć jQuery, po prostu uzyskasz wartość tekstową zakresu, skonwertujesz ją na liczbę, a następnie zastąp wartość tekstu. Konieczne będzie przekonwertowanie wartości na liczbę przed wykonaniem dodawania lub wykonanie połączenia ciągłego.

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

Updated: Używam każdego, aby pokazać, jak można to zrobić przy użyciu wybieraka rodzajowe, które mogą przyjąć zbiór wejść. W twoim przypadku, jeśli wiesz, że pasuje do dokładnie jednego elementu, możesz zoptymalizować go z ryzykiem konieczności przepisania go, jeśli chcesz, aby kod był stosowany do wielu elementów.

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

Updated: potrzebę użycia tekstu() (lub html()), ponieważ element jest SPAN, a nie wejście.

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>