7

所以这个的简短版本是：我可以只遍历选择器匹配元素中的元素each()吗？each()或者有没有更简单的方法可以在没有循环的情况下获得我想要的东西？

我认为这会容易得多，这让我觉得我只是错过了一些使用 jquery 遍历元素的基本原则。

所以这是场景：

我有一个表格（在这种情况下是合适的），其中每个单元格都有一个 text input。最后一个输入是只读的，应该是在该行上输入的其他值的总和。我有一个非常混乱的 js 脚本，用于查找每行的总计，然后是每行总计的总计。

这是基本的 HTML：

<table>
<thead>
<tr><th>Col 1</th><th>Col 2</th><th>Col 3</th><th>Total</th></tr>
</thead>
<tbody>
<tr id="row1"><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td class="total"><input type="text" readonly="readonly" /></td></tr>
<tr id="row2"><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td class="total"><input type="text" readonly="readonly" /></td></tr>
<tr id="row3"><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td class="total"><input type="text" readonly="readonly" /></td></tr>
</tbody>
</table>

为了清楚起见，javascript 将验证输入的数据是否为数字。

因此，我为每个输入都有一个事件侦听器，用于onchange在用户输入数据并移动到下一个单元格/输入时更新总数。然后我有一个名为的函数，该函数updateTotal当前使用for循环遍历每一行并在该循环内循环每个单元格，最后将总单元格中的输入设置为求和。

快速说明：我已经包含了下面的代码，以表明我不只是在寻找帮助并展示我所想的基本逻辑。请随意略读或跳过这部分。它可以工作，不需要任何调试或批评。

这就是它的样子：

function updateTotal() {
    table = document.getElementsByTagName("tbody")[0];
    allrows = table.getElementsByTagName("tr");
    grandtotal = document.getElementById("grand");
    grandtotal.value = "";

    for (i = 0; i < allrows.length; i++) {
        row_cells = allrows[i].getElementsByTagName("input");
        row_total = allrows[i].getElementsByTagName("input")[allrows.length - 2];
        row_total.value = "";

        for (ii = 0; ii < row_cells.length - 1; ii++) {
            row_total.value = Number(row_total.value) + Number(row_cells[i][ii].value);
            grandtotal.value = Number(grandtotal.value) + Number(row_cells[i][ii].value);
        }
    }
}

现在我正在尝试用 jquery 语法重写上面的内容，但我被卡住了。我认为最好的方法是使用以下each()循环：

function findTotals() {
$("tbody tr").each(function() {
    row_total = 0; 
    $($(this) + " td:not(.total) input:text").each(function() {
        row_total += Number($(this).val());
        }); 
    $($(this) + " .total :input:text").val(row_total);
});

}

但是使用$(this)似乎并不像我想象的那样工作。我阅读并看到$(this)在 each 循环中的使用指向每个匹配的元素，这是我所期望的，但我不知道如何在 each() 函数中遍历该元素。上面还省略了grand_total 位，因为让总变量起作用的运气更差。我尝试以下只是为了获得row_totals：

 $($(this).attr("id") + " td:not(.total) input:text").each(function() {

取得了一些成功，但是当我尝试添加它时设法打破它。我认为我不需要每一行都有一个 id 来完成这项工作，因为每个部分都应该指向我想到的行。

所以这个的简短版本是：我可以使用 each 循环只遍历匹配项中的元素吗？如果可以，正确的语法是什么？或者有没有更简单的方法可以在没有每个循环的情况下获得我想要的东西？

哦，最后一个想法...

是否可以使用 jquery 获取所有匹配元素的数字总和（而不是一个长字符串）？我自己会对此进行更多研究，但如果有人知道，它会使其中的一些变得容易得多。

4

2 回答 2

16

您正在尝试错误地设置上下文，请尝试以下操作：

function findTotals() {
    $("tbody tr").each(function() {
        row_total = 0; 
        $("td:not(.total) input:text",this).each(function() {
           row_total += Number($(this).val());
        }); 
        $(".total :input:text",this).val(row_total);
    });

}

有关上下文的更多信息，请查看 jquery 文档：http ://docs.jquery.com/Core/jQuery#expressioncontext

于 2009-09-01T01:09:22.607 回答
0

选择器可以有两个参数。第二个参数是要进行搜索的上下文 htat。尝试如下： $('#tableID tbody tr).each(function(){ //现在这是一个表格行，所以只需搜索该行中的所有文本框，可能带有一个名为 sum 或其他属性的 css 类 $('input[type=text]',this).each(function(){ //选择行中的所有文本框。$(this ).val() 获取文本框的值等

于 2009-09-01T01:14:59.543 回答