如何使用 JQuery 将增量（1）添加到元素的值

Question

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

如何使用 JQuery 将 $row[shortfall] 增加到 $row[shortfall]+1？

Answer 1

您需要 parseInt 将字符串处理为数字。

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

Answer 2

当它到达浏览器时，您的表达式将被评估并转换为数字。要使用 jQuery，您只需获取范围的文本值，将其转换为数字，然后替换文本值。在进行加法之前，您需要将值转换为数字，否则它将进行字符串连接。

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

更新：我使用每个选项来展示如何使用可能接受输入集合的通用选择器来执行此操作。在您的情况下，如果您知道它与一个元素完全匹配，那么如果您希望代码应用于多个元素，您可能会冒着必须重写它的风险来优化它。

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

更新：需要使用text()（或html()），因为元素是SPAN，而不是输入。

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>