如果可见则添加div选项以在结尾处获得总计

Question

I have a list of divs that pull integer values from a SQL table. All of those divs are not visible unless a certain selection is made in the form. I want to create another div that sum's all visible divs at the end for the user to see their ending total.

Edit: The below code is now what I have but it totals all divs not ones that are only visible.

$("#clicky").click(function () {
    var total = 0;
$('.equipmentmprice').each(function() {
    total += parseFloat($(this).find('span.price').eq(0).text());
});

$('#totalamount').text('Total is: $' + total);
});

I know I can use javascript or jquery but I'm not sure really where to start.

Here is an example of one of my divs:

<div class="largeplantablefive equipmentmprice" style="display:none">
<?php
    $connection = mysql_connect('localhost', 'test', 'testone');
    mysql_connect('localhost', 'test', 'testone');
    mysql_select_db('test');
    $queryone = mysql_query("SELECT price FROM pricing WHERE value = 'plantablefive'");
    $query_row = mysql_fetch_array($queryone);
    echo "Plan Tables: $" . ($query_row[price]) . "<span style='color:red'><i> Price does not include cost of the physical table.</i></span>";
?>  
</div>

Right now I'm thinking I will have to create another div or other tag inside the echo statement where the value equals $query_row.

Answer 1

Found the answer with some searching and using multiple suggestions combining it into my own. Below is what I did and the answer. Just added the :visible into the class select.

$("#clicky").click(function () {
    var total = 0;
$('.equipmentmprice:visible').each(function() {
    total += parseFloat($(this).find('span.price').eq(0).text());
});

$('#totalamount').text('Total is: $' + total);
});