jquery каждая функция путаница - PullRequest
Новая
       5

jquery каждая функция путаница

1 голос
/ 03 ноября 2011

Я пытаюсь обновить содержимое всех элементов с тегом id "row_total" до "$ 0.00".Я не могу понять, как правильно использовать each ().То, что написано ниже, обновляет только первый экземпляр # row_total. 

$(document).ready(function() {

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


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

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

heres jsfiddle -> http://jsfiddle.net/uxLZm/3/

Ответы [ 5 ]

4 голосов
/ 03 ноября 2011

У вас есть несколько <td> с одним и тем же идентификатором row_total.Это неверно .Идентификаторы должны быть уникальными, поэтому когда вы разрешаете нескольким элементам иметь один и тот же идентификатор, все может работать не так, как ожидалось.

Вместо этого используйте класс, который можно применять к нескольким элементам.Примените класс к каждому <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();
    });
});
4 голосов
/ 03 ноября 2011

Это тот факт, что вы повторно используете идентификаторы. Вы не можете иметь повторяющиеся идентификаторы в HTML. Вместо этого используйте классы.

Демо

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();
});
2 голосов
/ 03 ноября 2011

Ваши идентификаторы являются недействительными 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");

          });          
    });
});
2 голосов
/ 03 ноября 2011

Конечно, он обновляет только первый элемент с идентификатором row_total. Предполагается, что идентификаторы - это просто уникальный идентификатор для элементов.

Любой селектор для идентификатора автоматически возвращает первый и только первый элемент с этим идентификатором. В этом случае вам нужно использовать селектор класса и применить класс к элементам. Я немного отредактировал твой jsFiddle здесь> http://jsfiddle.net/uxLZm/5/

Точно так же вы правильно используете $.each().

2 голосов
/ 03 ноября 2011

Проблема в том, что вы можете использовать только один уникальный идентификатор на страницу. JavaScript увидит только первый. Измените его на класс, и он должен работать.

Вот обновленное jsfiddle с изменением.

...