Can't apply function to every element

Question

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

You should only has one #sum on the page. ID is a unique identifier, that's what this unexpected bevaviour. use calsses instead. — Yotam Omer, Jul 15 '15 at 18:26

score 1 · Answer 1 · answered Jul 15 '15 at 18:26

1

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/

answered Jul 15 '15 at 18:26

Nikhil Aggarwal

28,197
4
43
59

1

Many thanks. You and two more have the correct answer but your answer is short and neat. I will therefore accept your answer as soon as I can – Airikr Jul 15 '15 at 18:28

score 1 · Answer 2 · edited May 23 '17 at 11:43

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?

score 0 · Answer 3 · answered Jul 15 '15 at 18:54

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.

Can't apply function to every element

3 Answers3