如何使用Jquery获取加粗标签中的值

Question

我有一个表格

<div class="main">
<table>
 <tr>
     <td>
         <b class="bold">1500></b>
     </td>
     <td>
        <b class="bold">2500></b>
     </td>
     <td>
        <b class="bold">4500></b>
     </td>
 </tr>
</table>
<input type="text" id="displayTotal"/>
<input type="button" id="btnAdd" value="Get Total"/>
</div>

当点击按钮时，我想要将类名为bold的粗体标签内的值相加。 我尝试使用

<script>
$('#btnAdd').click(function(){
var a=$("div.bold").Val();

我不知道该怎么做了。请帮忙！我想要在文本框中显示8500的结果。

- Zaker

---

你的 b 标签没有关闭 </b>。 - Chris

<b class="bold">1500> 应该是 <b class="bold">1500</b></b>。 - user1178540

你的代码应该是 $("b.bold")，但它会返回一个集合。 - David Ansermot

.val(); v 应该是小写的，除此之外还有其他几个错误。 - Jai

感谢大家提供这么棒的答案。 - Zaker

Answer 1

您的HTML代码不合法。标签b需要关闭。之后，您可以使用迭代器并使用jQuery的text()方法获取值并将它们相加，例如：

$('#btnAdd').click(function() {
  //declare a variable to keep the values
  var sum = 0;
  //use each to iterate through b elements
  $("div.main table tr td b").each(function() {
    //sum the values
    sum += parseInt($(this).text(), 10);
  });
  //change input value with the new one
  $("#displayTotal").val(sum);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <table>
    <tr>
      <td> <b class="bold">1500</b>

      </td>
      <td> <b class="bold">2500</b>

      </td>
      <td> <b class="bold">4500</b>

      </td>
    </tr>
  </table>
  <input type="text" id="displayTotal" />
  <input type="button" id="btnAdd" value="Get Total" />
</div>

- Alex Char

---

在我看来，这是一个完美的答案。 - user1178540

谢谢Alex，实际上我在我的HTML中有很多代码，所以我犯了一个错误，没有正确地放置它。非常感谢。 - Zaker

Answer 2

$('#btnAdd').on('click', function () {
  var a = $('.main .bold').text();
};

- Evgeny Samsonov

Answer 3

粗体并不是div，而是'b'

var a=$("b.bold").text();

- devqon