Get specific data from page and write it to div

Question

I'm building an online store with javascript shopping cart. However, the script doesn't allow printing only one or two values when displaying cart, but I need to do this.

Here's what the cart looks like:

<div class="simpleCart_items">
    <div>
        <div class="headerRow">
            <div class="item-name">Tuote</div>
            <div class="item-price">Hinta</div>
            <div class="item-decrement">-</div>
            <div class="item-quantity">Määrä</div>
            <div class="item-increment">+</div>
            <div class="item-total">Yhteensä</div>
            <div class="item-remove">Poista</div>
        </div>
        <div class="itemRow row-0 odd" id="cartItem_SCI-1">
            <div class="item-name">Teipit</div>
            <div class="item-price">€0.00</div>
            <div class="item-decrement"><a href="javascript:;" class="simpleCart_decrement"><img src="css/minus.png" alt="minus"></a>
            </div>
            <div class="item-quantity">3</div>
            <div class="item-increment"><a href="javascript:;" class="simpleCart_increment"><img src="css/plus.png" alt="plus"></a>
            </div>
            <div class="item-total">€0.00</div>
            <div class="item-remove"><a href="javascript:;" class="simpleCart_remove"><img src="css/remove.png" alt="Remove"></a>
            </div>
        </div>
        <div class="itemRow row-1 even" id="cartItem_SCI-3">
            <div class="item-name">Car Speaker -hajuste</div>
            <div class="item-price">€4.00</div>
            <div class="item-decrement"><a href="javascript:;" class="simpleCart_decrement"><img src="css/minus.png" alt="minus"></a>
            </div>
            <div class="item-quantity">1</div>
            <div class="item-increment"><a href="javascript:;" class="simpleCart_increment"><img src="css/plus.png" alt="plus"></a>
            </div>
            <div class="item-total">€4.00</div>
            <div class="item-remove"><a href="javascript:;" class="simpleCart_remove"><img src="css/remove.png" alt="Remove"></a>
            </div>
        </div>
        <div class="itemRow row-2 odd" id="cartItem_SCI-5">
            <div class="item-name">Teipit (Musta hiilikuitu)</div>
            <div class="item-price">€0.00</div>
            <div class="item-decrement"><a href="javascript:;" class="simpleCart_decrement"><img src="css/minus.png" alt="minus"></a>
            </div>
            <div class="item-quantity">1</div>
            <div class="item-increment"><a href="javascript:;" class="simpleCart_increment"><img src="css/plus.png" alt="plus"></a>
            </div>
            <div class="item-total">€0.00</div>
            <div class="item-remove"><a href="javascript:;" class="simpleCart_remove"><img src="css/remove.png" alt="Remove"></a>
            </div>
        </div>
    </div>
</div>

NOTE: The cart is written via javascript so it isn't visible in page source, only in inspect mode of the browser.

So how would I gather the item-name, item-priceand item-quantity?

I've tried this:

    var name = $('.item-name');
    var price = $('.item-price');
    var quantity = $('.item-quantity');
    var data = name + price + quantity;
    $('#items').html(data);

But this won't actually do anything.

Answer 1

When doing this -> $('.item-name');

You are just capturing the element as object but not the value.

Now that you got your element as object, you need to extract the value and, in this case, your element object is a div so you can try .text() or .html() (to get the text or html inside the div).

(For this situation I will use text() cause you are working just with values and there is nothing related to html)

Try this:

var name = $('.item-name');
var price = $('.item-price');
var quantity = $('.item-quantity');
var data = name.text() + price.text() + quantity.text();
$('#items').html(data);

---

Better solution:

This will make clickable the div in which you have the product and match the cartItem_SCI pattern.

So, when user clicks any of the elements of your cart, you will get the name, price and quantity values that will be attached to the $('#items') div using append() method instead of html() (because using this will replace the product information each time the user clicks a div)

$(document).ready(function() {

    $('div[id^="cartItem_SCI-"]').css({ cursor:'pointer' });

    $('div[id^="cartItem_SCI-"]').click(function() {
        var name = $(this).find('.item-name');
        var price = $(this).find('.item-price');
        var quantity = $(this).find('.item-quantity');
        var data = name.text() + ' - ' + price.text() + ' - ' + quantity.text();
        $('#items').append(data + '<br/>');
    });

});​

Answer 2

For one item you can get like this.But since you have multiple items make one object like this .

var item={};

$('.item-name').each(function(){item.name=$(this).html()});
$('.item-price').each(function(){item.price=$(this).html()});
$('.item-quantity').each(function(){item.quantity=$(this).html()});


  var data='';    
        for(var i=0;i<item.length;i++)
               {
              data+=item[i].name+item[i].price+item[i].quantity;
                  }
        $('#items').html(data);

Answer 3

You are just getting a reference to the class, add .html() to get the inner html of the element that the class applied to.

var name = $('.item-name').html();