尝试从 jquery 选择器求和并更新元素

Question

我需要对一些文本元素求和并更新输入文本，以下是我能做到的：

这将是一个正确的例子。如果 <tr> 包含 class ui-state-error

，我想对 <span> 中的文本求和

HTML

  <table>
<tr id="rp-10-1-1" class="ui-state-error" style="width:50px; height:50px;">
    <td><span id="pr-10-1-1">100</span><td>
  </tr>  
<tr id="rp-10-1-2" class="ui-state-highlight" style="width:50px; height:50px;">
  <td><span id="pr-10-1-2">200</span><td>
</tr>  
<tr id="rp-10-1-3" class="ui-state-error" style="width:50px; height:50px;">
  <td><span id="pr-10-1-3">300</span><td>
</tr>  
</tr>
</table>
<input type="text" id="sumhere">

JAVASCRIPT

        $( 'tr[id^="rp-"]' ).click(
          function() {

        $('tr[id^="rp-"]').each(function(data, val) {

            var rps = $(this).attr("id").split("-");


              if ($("#pr-" + rps[1] + '-' + rps[2] + '-' + rps[3]).hasClass("ui-state-error")) {
                console.log($("#pr-" + rps[1] + "-" + rps[2] + "-" + rps[3]).text());
              }
        });
         }
        );

Answer 1

tr 会 td 不被识别为有效的 html。如果您只想提取 span 个元素的总和，您可以执行以下操作：

var total = 0;
$('span[id^=hp]').each(function() // selects span starting with id=hp
{
  total += parseInt($(this).text());
});

$("#sumhere").val(total);

根据您更新后的 HTML：

var total = 0;
$('tr[id^=rp-10-1] span').each(function() // selects span withing the tr element starting with id=rp-10-1
{
  if(!isNaN(parseInt($(this).text()))) // condition for safety check while converting text to interger.
   total += parseInt($(this).text());
});

$("#sumhere").val(total);

示例：https://jsfiddle.net/DinoMyte/7nhx26a2/3/

Answer 2

演示：https://jsfiddle.net/zzaj1jye/

HTML:

<tr id="rp-10-1-1">
  <span id="hp-10-1-1" class="ui-state-error">10</span>
  <span id="hp-10-1-2" class="ui-state-error">20</span>
  <span id="hp-10-1-3" class="ui-state-error">30</span>
</tr>

<input type="text" id="sumhere">

JS:

$(function() {

  var total = 0;
  $('span').each(function() {
    if ( $(this).hasClass('ui-state-error') ) {
        total += parseInt($(this).text());
    }
  });

   $("#sumhere").val(total);

});

尝试从 jquery 选择器求和并更新元素

Trying to sum from a jquery selector and update an element

javascript

jquery

sum

selector