jQuery - Get
text by variable ID

Question

Here is my code:

var itemCount = 0;
var addTo = "";

$(".add").click(function(){
    alert($(this).attr('id'));
    var itemClicked = $(this).attr('id');
    var a = parseInt(itemClicked);
    alert($(".price").find('#' + a).text());
    itemCount = itemCount + 1;
  });

and

<div class="col-sm-5 col-md-4 col-sm-2">
  <div class="thumbnail">
    <img src="..." alt="...">
    <div class="caption">
      <h3 class="item-header" id="1">iPhone</h3>
      <p>...</p>
      <p class="hidden" id="1">1</p>
      <p class="price" id="1">19.95</p>
      <p><button class="btn btn-primary add" role="button" id="1">Add to cart</button> <a href="#" class="btn btn-default" role="button">More</a></p>
    </div>
  </div>
</div>

What I want to do is write a function takes figures out which button triggered the function, and retrieves the according price to the button. In this case I pressed 1, and I want the price according to Item 1.

When I perform alert(a); then I retrieve the number of 1. So I suppose something is wrong with the following line, just cant figure out what...

alert($(".price").find('#' + a).text());

The .add element is in the button class, it retrieves the ID of the button which is one, and I'd like to use that ID to get the price according to ID="1" — Laurens Mäkel, Nov 04 '16 at 19:43
@Stuart http://stackoverflow.com/questions/5672903/can-i-have-a-div-with-id-as-number — j08691, Nov 04 '16 at 19:45
I'm aware thanks @j08691 - it's never wise to do this, just because you can. — Stuart, Nov 04 '16 at 20:56

Yuri Gor · Answer 1 · 2016-11-04T19:50:47.747

You don't need id:

$("button.add").click(function(){
  var $card = $(this).parents("div.caption");
  alert("adding good id:"+$card.children("input.good-id").val() + " with price: " + $card.children("p.price").text());
  /* note - don't send price to backend,
  it can be easily corrected in browser before click,
  send only id of the good, and get price from DB */
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5 col-md-4 col-sm-2">
  <div class="thumbnail">
    <img src="..." alt="...">
    <div class="caption">
      <h3 class="item-header">iPhone</h3>
      <p>...</p>
      <input type="hidden" class="good-id" name="goodId" value="1">
      <p class="price">19.95</p>
      <p><button class="btn btn-primary add" role="button">Add to cart</button> <a href="#" class="btn btn-default" role="button">More</a></p>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Nov 04 '16 at 19:50

Maybe you should add a data-price attribute (or something to reference to your actual data). I don't think it's a good practice to be dependant on the value of some paragraph tags. Better is to have a separation of display data and internal data.

You can access the data-price like this:

$('.button').click(function(e) {
  console.log(e.target.getAttribute('data-price'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Shop</h1>
<p>iPhone 7</p>
<p>price € 110</p>
<button data-price="110" class="button">Add</button>

score 0 · Answer 3 · answered Nov 05 '16 at 02:06

I updated your html markup to use data attributes. In that way it will be easier for you to select the needed prices of certain items:

<p class="hidden" data-item="1">1</p>
<p class="price" data-price="1">19.95</p>

Demo:

$('.add').on('click', function() {
    var itemId = $(this).attr('id');
    var itemPrice = $('.price[data-price="'+ itemId +'"]').text();
    alert(itemPrice);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5 col-md-4 col-sm-2">
    <div class="thumbnail">
        <img src="..." alt="...">
        <div class="caption">
            <h3 class="item-header" id="1">iPhone</h3>
            <p>...</p>
            <p class="hidden" data-item="1">1</p>
            <p class="price" data-price="1">19.95</p>
            <p>
                <button class="btn btn-primary add" role="button" id="1">Add to cart</button> <a href="#" class="btn btn-default" role="button">More</a></p>
        </div>
    </div>
</div>

jQuery - Get text by variable ID

3 Answers3

jQuery - Get
text by variable ID