#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    125
    Rep Power
    12

    Split in jQuery only splits div id once, not for each var


    Hi all,

    I created this snipped:
    Code:
    <script type="text/javascript">
       $(document).ready(function(){
         var element = $("#fpPrice").text().split(","); 
         var fpPriceVar = "<span class=\"fpCustomPrice\">"+element[0]+",<span class=\"superscript\">"+element[1]+"</span></span>";
    	 document.getElementById("fpPrice").innerHTML=fpPriceVar;
       });
      </script>
      <span id="fpPrice">54,95</span>
      <br>
      <span id="fpPrice">34,95</span>
    CSS for this:
    Code:
    <style type="text/css">
    .fpCustomPrice .superscript{font-size:xx-small; vertical-align:top;} 
    </style>
    It should make the price with superscript decimals. However it only works for the first div you call, the second and further are ignored. Is there a way to (easily) fix this?

    I've been trying a lot, without much luck.


    Cheers.
  2. #2
  3. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,957
    Rep Power
    1046
    Hi,

    this is a misunderstanding of HTML. An ID is supposed to be unique within the whole page, so you can't have two elements with the same ID. Maybe you want a class instead? And even then you'll need a loop to account for multiple elements.

    Comments on this post

    • Inpresif agrees : Awesome solution. Problem solved.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    125
    Rep Power
    12
    I am aware of the id/class difference and am already looking into a way to change it into a class.

    No luck yet though...
  6. #4
  7. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,957
    Rep Power
    1046
    Have you also read the second part about the loop?
    Code:
    $(".fpPrice").each(function (_, element) {
    	var price = $(element).text().split(",");
    	$(element).html('<span class="fpCustomPrice">' + price[0] + ',<span class="superscript">' + price[1] + '</span></span>' );
    });
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    125
    Rep Power
    12
    Yes i read that loop part but i was ignoring it for now to read up on the basics first;-)

    I'm having a hard time finding something that works for me. We need to display our Magento prices better looking.

    I fouind and tried several ways already. Also getElementByTagName and others.

    Will look into what you just posted also.

    I'll keep my results at hand when done and post them here.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    125
    Rep Power
    12
    Originally Posted by Jacques1
    Have you also read the second part about the loop?
    Code:
    $(".fpPrice").each(function (_, element) {
    	var price = $(element).text().split(",");
    	$(element).html('<span class="fpCustomPrice">' + price[0] + ',<span class="superscript">' + price[1] + '</span></span>' );
    });
    Sweet, you gave me the working version without me realizing it at first;-)
    I'm happy, took 5 hours to get where i am now, your code is perfect, it works!

    Thanks a lot.

IMN logo majestic logo threadwatch logo seochat tools logo