获取标签值并用 jquery 进行算术运算

Question

这听起来很荒谬，但我真的很想知道这是否可行，以及如何实现。这是我第一次在 Whosebug 中提问，因为我在这里学习了如何有风格地编码，当然还有像我这样的人的问题。谢谢你让我觉得 Whosebug 就是我的家。

我们问吧。

我正在制作一个 php 脚本，比唐纳德特朗普开始讨厌奥利奥饼干的速度更快。

脚本将此打印为代码 HTML

<strong>$</strong><h1>1800</h1>USD
<strong>$</strong><h1>800</h1>USD

所以，这是疯狂的情况来了...... Whit Jquery 我想获取两个 h1 元素，我想对它们进行算术运算。我知道，我可以使用 php 和 mysql 来做到这一点。但是关于时间，我更喜欢用 jQuery 来做到这一点。

¿有人可以帮助我吗？疯狂且非常非常简单的例子：

H1 + H1 或 H1 - H1 = 数字运算结果。

Answer 1

您可以使用 jquery .each(function(){}) 迭代并找出每个 h1 tag.For 演示中的文本我将它们放在一个数组中并且可以应用任何数学运算

var a=[];
$('h1').each(function(){
   var tempText = $(this).text().trim(); // Remove white space
   console.log(tempText)
   a.push(tempText)
})

编辑使用 parseInt 将其转换为整数

`var tempText = parseInt($(this).text().trim());` // Converts to integer

因此 a 现在将是一个整数数组

Example

Answer 2

你好，你可以这样做

var sum = 0;
$('h1').each(function(k,v){
    sum += parseInt($(v).text())
})
console.log(sum)

Answer 3

如果你想得到总和，你可以使用这个代码：

var total = 0;
$("h1").each(function(index, item) {
  total += Number($(item).text());
});
alert(total);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<strong>$</strong><h1>1800</h1>USD
<strong>$</strong><h1>800</h1>USD

Answer 4

疯狂而简单：

  $("strong")
     .next("h1")
     .get()
     .map(function(el){
       return $(el).text();
     })
     .reduce(function(a,b){
       return parseInt(a)+parseInt(b);
     })

[https://jsfiddle.net/hLwxrpoq/]

Answer 5

尝试使用.eq()缓存h1个元素，.html()到return个结果； + 运算符将文本转换为 Number

// select all `h1` elements
var h = $("h1");
// results
var result = $("#result");
// first `h1`
var first = h.eq(0).text();
var second = h.eq(1).text();

result.html(function() {
  var add = +first + +second;
  var subtract = +first - +second;
  return "Add first `h1` to second `h1`:" + add 
  + "<br>Substract second `h1` from first `h1`:" + subtract
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<strong>$</strong><h1>1800</h1>USD<br>
<strong>$</strong><h1>800</h1>USD<br>
<br>
<div id="result"></div>

Answer 6

您使用 .text() 检索 HTML 的内部文本，并使用 parseInt 将其解析为整数，正如上面其他人所解释的那样。

之后您可以将其附加到您的 HTML。

您的 HTML 可能如下所示：

<div id="math">
  <h1>800</h1>
  <h1>1800</h1>
</div>
<h1 id="answer"></h1>

你的 jquery 是这样的：

var math = $("#math"); //Get the math element
var numbers = math.find('h1'); //Get all the numbers from the math div
var answer = $("#answer"); //Get the element
var total = 0;

numbers.each( function() {
    total += parseInt( $(this).text() ); // Add each number together
});

answer.append( total ); // Append the total to the answer element

这里是 fiddle.

https://jsfiddle.net/75qxy57d/1/

获取标签值并用 jquery 进行算术运算

Take tag value and do an arithmetic operation with jquery

html

javascript

jquery

jquery-selectors