Как добавить приращение(1) к значению элемента с помощью JQuery

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

Как увеличить $row[shortfall] до $row[shortfall]+1 с помощью JQuery?

6
auto-increment jquery

3 ответов

вам нужно parseInt для обработки строк в виде чисел.

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

к тому времени, когда он попадет в браузер, ваше выражение будет оценено и превращено в число. Чтобы использовать jQuery, вы просто получите текстовое значение диапазона, преобразуете его в число, а затем замените текстовое значение. Перед добавлением вам нужно будет преобразовать значение в число, или оно будет выполнять конкатенацию строк.

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

Обновлено: Я использую каждый, чтобы показать, как вы это сделаете, используя общий селектор, который может принять коллекцию входной. В вашем случае, если вы знаете, что он соответствует точно одному элементу, вы можете оптимизировать его, рискуя переписать его, если хотите, чтобы код применялся к нескольким элементам.

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

Обновлено: необходимо использовать text () (или html ()), так как элемент является промежутком, а не входом.

2

$(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>
1