0

This is much like slider presentation:

<ul id='slider'>
   <li class="slide1">...</li>
   <li class="slide2">...</li>
   <li class="slide3">...</li>
   <li class="slide4 currentSlider">
      <div class="itemImage">../*image to display*/..</div>
      <span class="itemName">Bag</span>
      <span class="price">500</span>
   </li>
</ul>

I dynamically append currentSlider class in each li element whichever is on higher z-index(to diplay on top)

List of variables I already have:

  1. sliderIndex = li container index number
  2. sliderData = current slide jQuery object (li element)

My Goal is to get the price value (500) inside li currentSlider class so I can format it to currency.

My currency formatting code:

jQuery(function ($){
  mySlider.bind("slider.slide.onchange",function ( sliderIndex, sliderData ) {

 var price = $("span.price").html();

    $(".sliderPrice").text('$' + parseFloat(price , 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());

  });
});

I already have a final bunch of codes to make this things happened but unfortunately sometimes it shows/display the right currency format and sometimes shows $NaN. I mean NOT consistent.

0

2 Answers 2

1

You are getting the price value from price element without using the current slider li, please use the current slide object to get the price value: $("span.price",sliderData).html();

jQuery(function ($){
  mySlider.bind("slider.slide.onchange",function ( sliderIndex, sliderData ) {
    var price = $("span.price",sliderData).html();
    $(".sliderPrice").text('$' + parseFloat(price , 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());
  });
});
4
  • It works @lokeshpahal but only on the first slide.. the rest of the price in each slides shows $NaN. .currentSlider is a class dynamically appended whichever on top for display..
    – Raf
    Jul 30, 2014 at 4:34
  • please try with the currentSlider class : var price = $("span.price",'.currentSlider').html(); Jul 30, 2014 at 4:38
  • Show $NaN again for each prices @lokeshpahal. But I like the way you use the object sliderData. The next slides will get undefined value. I tried using delay() but didn't work out.
    – Raf
    Jul 30, 2014 at 4:52
  • Would you please provide jsfiddle for this so that we can take a look into code. Jul 30, 2014 at 5:04
0
var price =  $(".currentSlider .price").text().replace(/[^0-9.]/g, "");
$(".sliderPrice").text('$' + parseFloat(price , 10).toFixed(2));

http://jsfiddle.net/e6F7G/1/

You'd probably be better off filtering the numbers when you fill the elements with prices, but this works nonetheless...

1
  • The result is still undefined. .currentSlider is my class dynamically appended to current li element.
    – Raf
    Jul 30, 2014 at 3:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.