Question

我有一张桌子。

我想遍历所有商品，以获取其质量和价格。但是我不知道如何获得这些值。

表：

<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>

脚本：

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

我认为这是必需的。

然后我需要计算所有物品的价格。

http://jsfiddle.net/mg4wjfbu/

Answer 1

通过指定context argument或使用find()方法（在回调this中引用当前元素），在包装的div上以及在回调函数中的get元素中循环访问当前div中的元素。

$('.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>

使用jQuery遍历HTML表中的项目

1 个答案: