How to get content values from any divs to calculate with JQuery?-CodePudding

I'm trying to do a function that get the content values from div <div > and read the nodes divs <div >.

My code is below:

<div class="adicionados" id="tabela">
  <div class="rowtabela">
    <div class="item t_volumes">
      <b>Quantity</b>
    </div>
    <div class="item t_altura">
      <b>Height</b>
    </div>  
    <div class="item t_largura">
      <b>Width</b>
    </div>  
    <div class="item t_profundidade">
      <b>Depth</b>
    </div>  
    <div class="item t_peso">
      <b>Weight</b>
    </div>                              
    <div class="item">     
    </div>
  </div>
  <div class="rowtabela">
    <div class="item v_volumes">2</div>
    <div class="item v_altura">1.23</div>
    <div class="item v_largura">4.56</div>
    <div class="item v_profundidade">7.89</div>
    <div class="item v_peso">3.57</div>
    <div class="botao"><input type="button" class="form-control gridresponsivo txt-valor-nf btn btn-danger btn-sm" value="X" onclick="remover(this)"></div>
  </div>
  <div class="rowtabela">
    <div class="item v_volumes">1</div>
    <div class="item v_altura">7.89</div>
    <div class="item v_largura">5.46</div>
    <div class="item v_profundidade">1.32</div>
    <div class="item v_peso">7.53</div>
    <div class="botao"><input type="button" class="form-control gridresponsivo txt-valor-nf btn btn-danger btn-sm" value="X" onclick="remover(this)"></div>
  </div>
</div>

<div class="row">
  <div>                 
    <label>Quantity Total</label>                   
    <input class="txt-volumes" id="volumes" name="volumes" readonly />  
  </div>
  <div>                 
    <label>Cubage (m³)</label>                  
    <input class="campo-cubagem" id="cubagem" name="cubagem" readonly />
    <div>                   
      <label>Total Weight</label>                   
      <input class="form-control gridresponsivo txt-peso-total" id="peso_total" name="peso_total"  readonly />  
    </div>
</div>

This "table" with measures is generated dinamically by filling a form.

So I need get this measures and calculate the sum of quantity, the sum of quantity * weight, and sum of (Height * Width * Depth) * Quantity

I tried to get the values with the function below, but doesn't work.

$.each($('.rowtabela'), function(index, value) {
    console.log(index   ':'   $(value).text());
});

These values are concatenated in a single variable.

Follow the fiddle: https://jsfiddle.net/c2oz5t9q/

How can achieve it? Thank you!

CodePudding user response：

That is a JQuery question.

Incase you have it loaded, an update to your .each() iteration with nested .each() loops (https://api.jquery.com/each/):

$('.rowtabela').each(function(index, elTab) {
  $(elTab).children('.item').each(function(index, elItem) {  
    let text = $(elItem).text();
    console.log(index   ': '   text);
  })
});

Use JQueryby adding this <script> to your HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>