CODEWITHSUNDEEP
jqueryeach
Airikr
Airikr

Reputation: 6436

Can't apply function to every element

I can't apply a function to each #sum on the page using this code:

$(document).ready(function() {


    $('#sum').each(function(index, element) {
        var sum = $(this).html();
        $(element).html(number_format(sum, 2, ',', ' '));

        console.log(element);
    });


});



function number_format(f,c,h,e){f=(f+"").replace(/[^0-9+\-Ee.]/g,"");var b=!isFinite(+f)?0:+f,a=!isFinite(+c)?0:Math.abs(c),j=(typeof e==="undefined")?",":e,d=(typeof h==="undefined")?".":h,i="",g=function(o,m){var l=Math.pow(10,m);return""+Math.round(o*l)/l};i=(a?g(b,a):""+Math.round(b)).split(".");if(i[0].length>3){i[0]=i[0].replace(/\B(?=(?:\d{3})+(?!\d))/g,j)}if((i[1]||"").length<a){i[1]=i[1]||"";i[1]+=new Array(a-i[1].length+1).join("0")}return i.join(d)};

It only applies to the first element. DEMO

Upvotes: 1

Views: 45

Answers (3)

Sean Wessell
Sean Wessell

Reputation: 3510

Not that it is good practice however if you did not have any other option but to grab elements by id's and the id's are duplicated throughout the HTML you are working with you could do the following:

$('#sum') will only return the 1st occurance with the id of sum.

$('[id="sum"]') will return an array of all matches with the id therefor each will work because it is now an array of elements.

http://jsfiddle.net/mwcnz2k2/3/

You are much better using name or assigning a class and applying the selector that way though.

Upvotes: 0

AmmarCSE
AmmarCSE

Reputation: 30557

Do not use the same id on multiple elements. Use classes instead

$(document).ready(function() {


  $('.sum').each(function(index, element) {
    var sum = $(this).html();
    $(element).html(number_format(sum, 2, ',', ' '));

    console.log(element);
  });


});



function number_format(f, c, h, e) {
  f = (f + "").replace(/[^0-9+\-Ee.]/g, "");
  var b = !isFinite(+f) ? 0 : +f,
    a = !isFinite(+c) ? 0 : Math.abs(c),
    j = (typeof e === "undefined") ? "," : e,
    d = (typeof h === "undefined") ? "." : h,
    i = "",
    g = function(o, m) {
      var l = Math.pow(10, m);
      return "" + Math.round(o * l) / l
    };
  i = (a ? g(b, a) : "" + Math.round(b)).split(".");
  if (i[0].length > 3) {
    i[0] = i[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, j)
  }
  if ((i[1] || "").length < a) {
    i[1] = i[1] || "";
    i[1] += new Array(a - i[1].length + 1).join("0")
  }
  return i.join(d)
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
First: <span class="sum">4326544</span>
<br>Second: <span class="sum">654654</span>
<br>Last: <span class="sum">43264</span>

See Why is it a bad thing to have multiple HTML elements with the same id attribute?

Upvotes: 1

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28455

You are using id selector. Update it to class selector

Markup 

First: <span class="sum">4326544</span><br>
Second: <span class="sum">654654</span><br>
Last: <span class="sum">43264</span>

JS

$('.sum').each(function(index, element) {

Updated fiddle - http://jsfiddle.net/mwcnz2k2/1/

Upvotes: 1

Related Questions