How to extract an element from id?

Question

Question: How to extract element from id?

HTML :

<div class="product">
    <p id="price1">99,00</p>
</div>
<div class="product">
    <p id="price2">101,00</p>
</div>
<div class="product">
    <p id="price3">50,00</p>
</div>
<div class="product">
    <p id="price4">1,99</p>
</div>
<div class="product">
    <p id="price5">2,01</p>
</div>

JS :

var sumPrice = 0;

$(".product").click(function() {    

    if ( i = 1) sumPrice += parseFloat($( "#price" + i ).text())
    else if ( i = 2) sumPrice += parseFloat($( "#price" + i ).text())
    else if ( i = 3) sumPrice += parseFloat($( "#price" + i ).text())
    else if ( i = 4) sumPrice += parseFloat($( "#price" + i ).text())
    else if ( i = 5) sumPrice += parseFloat($( "#price" + i ).text())

    $(".total").val(sumPrice);
});

I'm trying to get different prices and summarize. Now I add only the first value.

Fiddle

You don't need any conditions in your handler. Just `parseFloat( $(this).text() )` - you'll probably have to replace your commas with periods, and then back again when outputting it - [something like this](https://jsfiddle.net/2gczfnph/3/) — billyonecan, Nov 18 '15 at 13:02
@billyonecan, thank you a lot for the helpful comments, I even learned a bit myself with the different ways of getting prop id. :) — Niki van Stein, Nov 18 '15 at 13:18

Niki van Stein · Accepted Answer · 2015-11-18T13:31:02.800

6

How about:

$(".product").click(function() {   
    sumPrice += parseFloat($( this ).text())
    $(".total").val(sumPrice);
});

A working JsFiddle.
As @bilyonecan also notes, you might want to replace the , with a . such that the value is parsed correctly to float. You can do that using .replace(',', '.') a simple replace on the $( this ).text() making the code:

$(".product").click(function() {   
    sumPrice += parseFloat($( this ).text().replace(',', '.'))
    $(".total").val(sumPrice);
});

If you really want to find out the id of the clicked item you can do that using:

this.id; //gives the id of the clicked element. (javascript style)
$(this).prop('id') //or jQuery style (id of clicked element) 
$(this).children().first().prop('id'); //gives the id of the first child element (<p> in your case)

`$this` in jQuery / Javascript

The object $this is the object where the function or listener belongs to, and in your case it is the object that is being clicked and has this click handler. $this is very convenient and meant to be used in this way such that you do not need ids with counters and more of this kind of work arounds.

edited Nov 18 '15 at 13:31

answered Nov 18 '15 at 13:02

Niki van Stein

10,564
3
29
62

That seems more correct. The fiddle suggests that this is the desired behavour. – mikeyq6 Nov 18 '15 at 13:06
Maybe add a segment about `this` in jQuery's click function - how the element clicked binds itself to the function. That seems to be the part OP's not familiar with. – Neta Nov 18 '15 at 13:11
@Neta, good point, improve it if you like, I am not very good in explaining the exact nature of `$this` I am afraid. – Niki van Stein Nov 18 '15 at 13:15
Change `$(".total").val(sumPrice);` to `$(".total").val(parseFloat(sumPrice).toFixed(2));` to show decimal places too. – Lucas Souza Nov 18 '15 at 13:21
Thanks. It's really helpful. What if I change HTML? Should I use `this`? [Fiddle](https://jsfiddle.net/2gczfnph/10/) – broc Nov 18 '15 at 13:28
Ok. Is there any universal method for this replace? Look at this: [jsfiddle.net/2gczfnph/12/](https://jsfiddle.net/2gczfnph/12/) – broc Nov 18 '15 at 13:39
@rylko sure, have a look here: http://stackoverflow.com/questions/4460595/jquery-filter-numbers-of-a-string You will need regular expressions. – Niki van Stein Nov 18 '15 at 13:45
@bas-van-stein thank you a lot. My final code: [jsfiddle.net/2gczfnph/13/](https://jsfiddle.net/2gczfnph/13/). There is only one problem in 3rd row `3rd product: 50,00`. – broc Nov 18 '15 at 13:56
1

@rylko you are welcome, you can use this: https://jsfiddle.net/2gczfnph/17/ I am using the fact that you want to remove everything till the `:`. – Niki van Stein Nov 18 '15 at 13:59

How to extract an element from id?

1 Answers1

$this in jQuery / Javascript

`$this` in jQuery / Javascript