CODEWITHSUNDEEP
jqueryeach
John Biddulph
John Biddulph

Reputation: 11

Jquery .each() only works on 1 element

I would like to remove the last 5 chars on a price on the administrate-price class. This is only working on 1 element as I can see in my console.

$(".administrate-price").each(function(i, object) {
    thePrice = $(this).text();
});
thePrice = thePrice.substr(0, thePrice.length - 5);

How can I make this work for all the administrate-price elements?

Upvotes: 0

Views: 1165

Answers (3)

CR Drost
CR Drost

Reputation: 9807

You need to understand your building blocks better.

The jQuery .each(fn) method is available on any jQuery collection and applies the function fn synchronously to each of the elements of the collection with the numerical index of the element.

Your code therefore says:

  1. Get all elements with the administrate-price class.
  2. For each of them: set the global variable thePrice to the inner text of the element.
  3. Once the loop has completed: set the global variable thePrice to its substring lacking the last 5 characters.

Step 2 repeatedly clobbers the value that you're setting the global variable to, such that only the last one is kept. By itself the code snippet that you've given does nothing else; it just clobbers a global variable that you can later see with window.thePrice (on a browser).

Instead you probably wanted this:

  1. Get all elements with the administrate-price class.
  2. For each of them:
    • Get the current text.
    • Truncate that text.
    • Set the current text to be the above truncation.

The function (encapsulating step 2) therefore needs to be:

function () { 
    var el = $(this);
    el.text( // setter
        el.text() // getter
          .slice(0, -5) // truncation
    );
}

This defines one local variable el which saves the $(this) so that jQuery does not need to build two one-element collections but just reuses one as the getter and setter; you could also just write the one-liner function(){$(this).text($(this).text().slice(0, -5))} if you wanted, without storing this variable.

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337560

Note that you're setting the thePrice value outside of the loop, after the loop completes. This means that it will only ever see the value of the final iteration. Try this:

$(".administrate-price").each(function(i, object) {
    thePrice = $(this).text().substr(0, thePrice.length - 5);
    $(this).text(thePrice);
});

It's also worth noting that you do not need to use each() in this instance, as you can provide a function to text() to be executed against each element individually. Try this:

$(".administrate-price").text(function(i, t) {
    return t.substr(0, t.length - 5);
});

Upvotes: 1

AmmarCSE
AmmarCSE

Reputation: 30557

By the time the each iterations have completed, thePrice is set to the text of the last element. Do the substring operation within the iteration itself

$(".administrate-price").each(function(i, object) {
         var thePrice = $(this).text();
         $(this).text(thePrice.substr(0, thePrice.length-5));
    });

Upvotes: 3

Related Questions