jQuery get text value from elements from different divs with same class

Question

<div class="panel">
    <div class="panel-heading item-name">T-shirt1</div>
    <div class="panel-body"><img src="img/shirt1.jpg" class="img-responsive" alt="Image"></div>
    <div class="panel-footer text-center">
        <h5>PRICE: <span class="old-price">$15.32</span></h5>
        <h4>$17.56</h4>
        <button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
    </div>
 </div>
<div class="panel">
    <div class="panel-heading item-name">T-shirt2</div>
    <div class="panel-body"><img src="img/shirt2.jpg" class="img-responsive"  alt="Image"></div>
    <div class="panel-footer text-center">
        <h5>PRICE: <span class="old-price">$21.67</span></h5>
        <h4>$23.15</h4>
        <button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
    </div>
</div>
<div class="panel">
    <div class="panel-heading item-name">T-shirt3</div>
    <div class="panel-body"><img src="img/shirt3.jpg" class="img-responsive" alt="Image"></div>
    <div class="panel-footer text-center">
        <h5>PRICE: <span class="old-price">$16.69</span></h5>
        <h4>$16.80</h4>
        <button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
    </div>
</div>

What I really want is to retrieve the value of each item-name when I click on the Add to cart button. If I click on the first button, I should get T-shirt1, second button should alert T-shirt2, third button => T-shirt3.

Here is my jQuery script.

<script>

$('.add-to-cart').click(function() {
    var itemName = $('.item-name', this).text();
    alert(itemName);
}); 
</script>

user7739271 · Accepted Answer · 2018-01-14 19:13:34Z

3

You can try this:

$('.add-to-cart').click(function() {
    var itemName = $(this).closest('.panel').find('.item-name').text();
    alert(itemName);
});

Usage of the closest method: closest

answered Jan 14, 2018 at 19:13

user7739271

Sign up to request clarification or add additional context in comments.

1 Comment

Maximilian Both Over a year ago

Thanks for your quick answer. Does exactly what I wanted.

Justinas Marozas · Accepted Answer · 2018-01-14 19:24:09Z

1

Go from clicked button up in parents chain until you find .panel and then down in children tree until you find .item.name:

$('.add-to-cart').click(function() {
    var itemName = $(this).parents('.panel').children('.item-name').first().text();
    alert(itemName);
});

answered Jan 14, 2018 at 19:24

Justinas Marozas

2,7321 gold badge21 silver badges40 bronze badges

Collectives™ on Stack Overflow

jQuery get text value from elements from different divs with same class

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related