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

I’m trying to do a function that get the content values from div <div class="rowtabela"> and read the nodes divs <div class="item v_...">.

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!

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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/):

JS

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0