Loop through items in HTML table using jQuery

Question

I have a table.

I want to go through all the goods and get their quality and price. But i can't figure out how to get these values.

table:

<div class="table-items__container">
    <div class="table-items__item">
        <div class="item_name">Name</div>
        <div class="item_quality">1</div>
        <div class="item_price">30</div>
        <div class="table-items_item__controls">
            <a href=""><i class="fas fa-edit"></i></a>
            <a href=""><i class="fas fa-trash"></i></a>
        </div>
    </div>
    <div class="table-items__item">
        <div class="item_name">Name</div>
        <div class="item_quality">2</div>
        <div class="item_price">20</div>
        <div>
            <a href=""><i class="fas fa-edit"></i></a>
            <a href=""><i class="fas fa-trash"></i></a>
        </div>
    </div>
    <div class="table-items__item">
        <div class="item_name">Name</div>
        <div class="item_quality">3</div>
        <div class="item_price">10</div>
        <div>
            <a href=""><i class="fas fa-edit"></i></a>
            <a href=""><i class="fas fa-trash"></i></a>
        </div>
    </div>
</div>
<div class="Summary">Summary: <span></span></div>

Script:

$('.table-items__item').children().each(function(){
    console.log($(this).text());
});

I think that's all needed.

Then I need to calculate the price of all items.

http://jsfiddle.net/mg4wjfbu/

jQuery Learning Center

Andreas
– Andreas

2019-04-03 16:19:47 +00:00
Commented Apr 3, 2019 at 16:19 — Andreas
– Andreas, Commented Apr 3, 2019 at 16:19
What is problem?

Maheer Ali
– Maheer Ali

2019-04-03 16:22:16 +00:00
Commented Apr 3, 2019 at 16:22 — Maheer Ali
– Maheer Ali, Commented Apr 3, 2019 at 16:22

Pranav C Balan · Accepted Answer · 2019-04-03 16:22:22Z

Iterate over the wrapped div and within the callback function get element within current div by specifying context argument or using find() method(within callback this refers to the current element).

$('.table-items__item').each(function() {
  console.log($('.item_quality', this).text(), $('.item_price', this).text());
  
  // or
  console.log($(this).find('.item_quality').text(), $(this).find('.item_price').text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-items__container">
  <div class="table-items__item">
    <div class="item_name">Name</div>
    <div class="item_quality">1</div>
    <div class="item_price">30</div>
    <div class="table-items_item__controls">
      <a href=""><i class="fas fa-edit"></i></a>
      <a href=""><i class="fas fa-trash"></i></a>
    </div>
  </div>
  <div class="table-items__item">
    <div class="item_name">Name</div>
    <div class="item_quality">2</div>
    <div class="item_price">20</div>
    <div>
      <a href=""><i class="fas fa-edit"></i></a>
      <a href=""><i class="fas fa-trash"></i></a>
    </div>
  </div>
  <div class="table-items__item">
    <div class="item_name">Name</div>
    <div class="item_quality">3</div>
    <div class="item_price">10</div>
    <div>
      <a href=""><i class="fas fa-edit"></i></a>
      <a href=""><i class="fas fa-trash"></i></a>
    </div>
  </div>
</div>
<div class="Summary">Summary: <span></span></div>
</div>

Collectives™ on Stack Overflow

Loop through items in HTML table using jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related