表输入值返回带有JQuery的NaN
表输入值返回带有JQuery的NaN
提问于 2020-05-12 23:13:07
我试图返回quantity类的值，但一直得到NaN。我可以访问价格类，但不能访问数量。不同之处在于数量有一个输入。
<body>
<tr>
<td class="item pr-5">Sample</td>
<td class="price pr-5">25.33</td>
<td class="quantity pr-5"><input type="number" value="1" /></td>
<td class="subtotal pr-5">$25.33</td>
<td>
<button class="btn btn-danger btn-sm remove">
Remove Item
</button>
</td>
</tr>
</tbody>$(document).ready(function () {
$('tbody tr').each(function (i, ele) {
var price = parseFloat($(ele).children('.price').text());
console.log(price);
var quantity = parseFloat($(ele).children('.quantity').text());
console.log(quantity); // NaN
var subtotal = price * quantity;
// console.log(subtotal);
});
});回答 4
Stack Overflow用户
回答已采纳
发布于 2020-05-12 23:20:11
在reach input标记中使用find()方法而不是使用两个children方法。并从input标记中获取值，使用val()而不是text()。
var quantity = parseFloat($(ele).find('.quantity input').val());
$(document).ready(function() {
$('tbody tr').each(function(i, ele) {
var price = parseFloat($(ele).children('.price').text());
console.log(price);
var quantity = parseFloat($(ele).find('.quantity input').val());
console.log(quantity); // NaN
var subtotal = price * quantity;
// console.log(subtotal);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="item pr-5">Sample</td>
<td class="price pr-5">25.33</td>
<td class="quantity pr-5"><input type="number" value="1" /></td>
<td class="subtotal pr-5">$25.33</td>
<td>
<button class="btn btn-danger btn-sm remove">
Remove Item
</button>
</td>
</tbody>
</table>
Stack Overflow用户
发布于 2020-05-12 23:16:47
这是因为<td class="quantity pr-5"><input type="number" value="1" /></td>这一行。此行没有text，但它有另一个子项
$(document).ready(function() {
$('tbody tr').each(function(i, ele) {
var price = parseFloat($(ele).children('.price').text());
console.log(price);
var quantity = parseFloat($(ele).children('.quantity').text());
console.log(quantity); // NaN
var subtotal = price * quantity;
// console.log(subtotal);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<table>
<tr>
<td class="item pr-5">Sample</td>
<td class="price pr-5">25.33</td>
<td class="quantity pr-5"><input type="number" value="1" /></td>
<td class="subtotal pr-5">$25.33</td>
<td>
<button class="btn btn-danger btn-sm remove">
Remove Item
</button>
</td>
</table>
Stack Overflow用户
发布于 2020-05-12 23:26:52
谢谢，我能够解决这个问题：
var quantity = parseFloat($(ele).children('.quantity').children().val());页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61755307
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号