javascript - jQuery each loops twice - Stack Overflow

admin管理员组

文章数量:1301556

I am having some trouble with a bit of jQuery.

I have a list of textboxes for inputting numeric values into and a final textbox which would contain the total sum of the other textboxes.

I don't know what I'm doing wrong but each time you enter a number into any of the textboxes the total value is x2 of what the actual value should be. I've tried stepping through the javascript to see whats happening and it looks like the .each is looping twice.

I have spent the best part of 2 days googling this issue and I've not been able to find a solution to my problem.

Here is a link to my code JSFiddle

and here is my javascript

$('.your-ine').focusout(function () {
    var tempTotal;

    tempTotal = 0;

    $('.your-ine').each(function () {
        tempTotal += Number($(this).val());

        $('#total-ine-textbox').val(tempTotal);
    });
});

Thank you for your time.

I am having some trouble with a bit of jQuery.

I have a list of textboxes for inputting numeric values into and a final textbox which would contain the total sum of the other textboxes.

I don't know what I'm doing wrong but each time you enter a number into any of the textboxes the total value is x2 of what the actual value should be. I've tried stepping through the javascript to see whats happening and it looks like the .each is looping twice.

I have spent the best part of 2 days googling this issue and I've not been able to find a solution to my problem.

Here is a link to my code JSFiddle

and here is my javascript

$('.your-ine').focusout(function () {
    var tempTotal;

    tempTotal = 0;

    $('.your-ine').each(function () {
        tempTotal += Number($(this).val());

        $('#total-ine-textbox').val(tempTotal);
    });
});

Thank you for your time.

• javascript
• jquery

Share Follow edited Feb 9, 2015 at 11:30 Alex 11.3k1313 gold badges5252 silver badges6464 bronze badges asked Feb 9, 2015 at 11:27 RichardRichard 8011 silver badge1212 bronze badges 3

• "it looks like the .each is looping twice" - is the list of matched elements in the selector definitely correct, and the duplication isn't there because e.g. you've got both the input and an element surrounding the input with your-ine class? – Rup Commented Feb 9, 2015 at 11:30
• The example is working fine on my browser.. – satchcoder Commented Feb 9, 2015 at 11:30
• jsfiddle/u5zqy06d/9 this now works – Matteo Tassinari Commented Feb 9, 2015 at 11:36

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 3

You have two input in each div set. type=number and type=text that's why it take two time calculate each value. You need to take one of them so I take type=number from them and your problem solved.

 $('.your-ine').focusout(function () {
     tempTotal = 0;    
      $('.your-ine[type=number]').each(function (index) {
          tempTotal += Number($(this).val());    
      });
          $('#total-ine-textbox').val(tempTotal);
  });

Demo

You have two inputs in each set. i.e. type number and type text. you should only use the value from either one of it. you can use :visible selector to target only textboxes as input type number elements has css set to display none:

$('input.your-ine:visible').each(function () {
      tempTotal += Number($(this).val());
      $('#total-ine-textbox').val(tempTotal);
  });

Working Demo

Try this:

  $('input.your-ine').on('focusout', function () {
      var tempTotal = 0;
      $('input.your-ine:visible').each(function () {
          tempTotal += parseFloat(this.value, 10);
      });
      $('#total-ine-textbox').val(tempTotal);
  });

  $(document).ready(function () {
     webshims.setOptions('forms-ext', {
         replaceUI: 'auto',
         types: 'number'
     });
     webshims.polyfill('forms forms-ext');
 });
 var tempTotal=0;
 $('.your-ine').focusout(function (e) {
         tempTotal += Number($(this).val());
         $('#total-ine-textbox').val(tempTotal);
 });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form>
    <div class="hide-inputbtns">
        <!-- /Household Details -->
        <div class="container">
            <div class="panel panel-default">
                <div class="panel-body">
                    <!-- /Content -->
                    <!-- /Your ine -->
                     <h2 class="sub-header">Input Value</h2>

                    <table class="table table-striped table-bordered">
                        <tr class="info">
                            <th class="col-md-2">&nbsp;</th>
                        </tr>
                        <tr>
                            <td class="col-md-2">
                                <div class='input-group'><span class='input-group-addon'>£</span>
                                    <input type='number' value='0' min='0' step='0.01' data-number-to-fixed='2' data-number-stepfactor='100' class='form-control input-sm your-ine' name='your-ine' value='0.00' />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="col-md-2">
                                <div class='input-group'><span class='input-group-addon'>£</span>
                                    <input type='number' value='0' min='0' step='0.01' data-number-to-fixed='2' data-number-stepfactor='100' class='form-control input-sm your-ine' name='your-ine' value='0.00' />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="col-md-2">
                                <div class='input-group'><span class='input-group-addon'>£</span>
                                    <input type='number' value='0' min='0' step='0.01' data-number-to-fixed='2' data-number-stepfactor='100' class='form-control input-sm your-ine' name='your-ine' value='0.00' />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="col-md-2">
                                <div class='input-group'><span class='input-group-addon'>£</span>
                                    <input type='number' value='0' min='0' step='0.01' data-number-to-fixed='2' data-number-stepfactor='100' class='form-control input-sm your-ine' name='your-ine' value='0.00' />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="col-md-2">
                                <div class='input-group'><span class='input-group-addon'>£</span>
                                    <input type='number' value='0' min='0' step='0.01' data-number-to-fixed='2' data-number-stepfactor='100' class='form-control input-sm your-ine' name='your-ine' value='0.00' />
                                </div>
                            </td>
                        </tr>
                                                <tr class="info">
                            <td class="col-md-2">
                                <div id="total-ine">
                                    <div class='input-group'><span class='input-group-addon'>£</span>
                                        <input type='number' value='0' min='0' step='0.01' data-number-to-fixed='2' data-number-stepfactor='100' class='form-control input-sm' name='total-ine' id="total-ine-textbox" value='0.00' readonly />
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <!-- Your ine/ -->
                    <!-- Content/-->
                </div>
            </div>
        </div>
        <!-- Household Details/ -->
    </div>
</form>

you used the foreach loop in focus out event thats the problem .the code without any console error

In each DIV you have 2 classes , 1 for textbox , other for input type number

Check line 3 and 4 below

<div class="input-group">
    <span class="input-group-addon">£</span>
    <input type="number" value="0" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control input-sm your-ine" name="your-ine" style="-webkit-appearance: none; display: none;">
    <input class="ws-number ws-inputreplace form-control input-sm your-ine wsshadow-1423481433791" type="text" placeholder="" value="0" aria-required="false" inputmode="numeric" aria-labelledby="" style="margin-left: 0px; margin-right: 0px; width: 426.2px;">
    <span class="input-buttons number-input-buttons input-button-size-1 wsshadow-1423481433791"><span unselectable="on" class="step-controls">
    <span class="step-up step-control"></span><span class="step-down step-control"></span></span></span>
</div>

So use $('[name="your-ine"]').each(function () {

Working Fiddle

Once it's fixed, here's two things to improve performance :

• Convert the jQuery collection of input elements to a proper array then make a running total with Array method .reduce(). No assignemtns required.
• In reduce's callback, use +el.value, to grab the value and to convert it from String to Number. No need for $(this) in the loop.

Here's the code, based on @Sadikhasan's answer :

$('.your-ine').focusout(function () {
    $("#total-ine-textbox").val($('.your-ine[type=number]').get().reduce(function(sum, el) {
        return sum + +el.value;    
    }, 0));
});

DEMO

Try This:-

  $('input.your-ine').on('focusout', function () 
    {
       var tempTotal = 0;
       $('input.your-ine:visible').each(function () 
        {
             tempTotal += parseFloat(this.value, 10);
        });
        $('#total-ine-textbox').val(tempTotal);
    }
);

本文标签： javascriptjQuery each loops twiceStack Overflow