Question

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

我认为这会更容易，这让我觉得我只是缺少一些使用jquery进行元素遍历的基本原则。

所以这是场景：

我有一个表（在这种情况下它是合适的），其中每个单元格都有一个文本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（）函数中遍历该元素。上面也省略了grand_total位，因为我得到的总变量工作的运气更少。我尝试了以下方法来获取row_totals：

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

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

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

哦，最后一个念头......

是否可以使用jquery获取所有匹配元素的数值和（而不是一个长字符串）？我会更多地研究这个问题，但是如果有人知道的话，它会让一些变得更容易。

Answer 1

您正试图设置错误的上下文尝试：

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

Answer 2

选择器可以有两个参数。第二个参数是要进行搜索的上下文htat。尝试类似以下内容： $（'＃tableID tbody tr）.each（function（）{ //现在这是一个表行，所以只搜索该行中的所有文本框，可能使用名为sum的css类或其他属性 $（ '输入[类型=文本]'，此）。每个（函数（）{ //选择行中的所有textbosxes。 $（this）.val（）获取文本框等的值。 }）; //现在在这个函数之外你会得到总数 //将其添加到隐藏字段或全局变量以获取行总数等。 }）;

使用jquery获取每行总计和表的总计

2 个答案: