Question

我正在尝试将id为“row_total”的所有元素的内容更新为“$ 0.00”。我无法弄清楚如何正确使用每个（）。以下所述内容仅更新#row_total的第一个实例。

$(document).ready(function() {

    $("#reset_row_totals").live('click', function() {


     $('#row_total').each(function() {
            $(this).html("$0.00");

          });          
        e.preventDefault();
    });
});

heres a jsfiddle - ＆gt; http://jsfiddle.net/uxLZm/3/

Answer 1

这是你重复使用id的事实。您不能在HTML中拥有重复的ID。相反，使用类。

演示

http://jsfiddle.net/MzrTd/

HTML

<td class='row_total'>$5.99</td>

的jQuery

$("#reset_row_totals").live('click', function() {


 $('.row_total').each(function() {
        $(this).html("$0.00");

      });          
    e.preventDefault();
});

Answer 2

您有多个<td>具有相同的ID row_total。这是无效。 ID应该是唯一的，因此当您让多个元素具有相同的ID时，事情可能无法按预期工作。

相反，使用可应用于多个元素的类。将课程应用于您要重置的每个<td>并使用.class_name CSS选择器：jsFiddle

HTML：

<a href='#' id='reset_row_totals'>Reset Rows</a><br/><br/><br/>    
<table>
    <tr><td class='row_total'>$5.99</td></tr>
    <tr><td class='row_total'>$3.50</td></tr>
    <tr><td class='row_total'>$32.00</td></tr>
    <tr><td class='row_total'>$9.99</td></tr>
</table>

JavaScript的：

$(document).ready(function() {
    $("#reset_row_totals").live('click', function(e) {
     $('.row_total').each(function() {
            $(this).html("$0.00");
          });
    e.preventDefault();
    });
});

Answer 3

问题是您每页只能使用一个唯一ID。 JavaScript只会看到第一个。把它改成一个类，它应该可以工作。

这是updated jsfiddle的变化。

Answer 4

当然它只更新ID为row_total的第一个元素。 ID应该只是元素的唯一标识符。

ID的任何选择器都将自动返回第一个且唯一具有该ID的元素。在这种情况下，您需要使用类选择器，并将类应用于元素。我在这里稍微编辑了你的jsFiddle＆gt; http://jsfiddle.net/uxLZm/5/

正如您感兴趣的那样，您正在正确实施$.each()。

Answer 5

您的身份证件是非法的HTML。尝试将此更改为您的HTML：

<table>
    <tr><td class='row_total'>$5.99</td></tr>
    <tr><td class='row_total'>$3.50</td></tr>
    <tr><td class='row_total'>$32.00</td></tr>
    <tr><td class='row_total'>$9.99</td></tr>

</table>


$(document).ready(function() {

    $("#reset_row_totals").live('click', function() {


     $('.row_total').each(function() {
            $(this).html("$0.00");

          });          
    });
});

jquery每个功能混乱

5 个答案:

演示

HTML

的jQuery