Как правильно провести расчет?

Question

[sergey]

Есть три блока с разным количеством транзакций и разной суммой, необходимо для каждой транзакции посчитать стоимость одной. Написал следующее:

$('.translate').each(function(){

        var amount = $('.number').html();
        var cost = $('.price').html();

        var res = amount ? cost / amount : 0;

        $(".price-one").text('$' + res.toFixed(0));

    });

Но в данном случае в price-one для всех трех блоков записывается одно и тоже значение, как исправить? Голова не варит с утра. Помогите.

Comments

[Rsa97]

Покажите фрагмент html с этими блоками

Answer 1

[Exploding]

Ну так уникализируйте селекторы для результатов, или из цикла вынесите, я не знаю как там оно у вас все устроено, но вы по классу три раза все по кругу перезаписываете в элементах .price-one

Comments

[sergey]

нельзя уникализировать, эти данные динамически собираются на странице, сколько их будет неизвестно, там джанговский цикл выводит данные, я сделай айдишники по номеру (id="trans-number-1"), но что-то пошло не так и сними результата не вышло.

[Exploding]

Sagan, верните айдишники, только внимательно!! Классы уникальные, нет так используйте родственные связи. Да вариантов то много. Проблема главное понятно в чем я надеюсь?)

[sergey]

<table class="translate">
            <tbody><tr>
                <td colspan="2">Translations</td>
                <td>Price</td>
                <td></td>
            </tr>
            
            <tr class="form1">
                <td><span id="trans-number-1" class="col">1</span></td>
                <td></td>
                <td><span class="currenty">$</span><span id="trans-price-1" class="price">$247</span><span class="vert">/</span><span class="price-one">$</span><span class="text">per optimization</span></td>
                <td><button class="btn btn-buy" data-value="1">buy now</button></td>
            </tr>
            
            <tr class="form4">
                <td><span id="trans-number-4" class="col">4</span></td>
                <td></td>
                <td><span class="currenty">$</span><span id="trans-price-4" class="price">908</span><span class="vert">/</span><span class="price-one">$</span><span class="text">per optimization</span></td>
                <td><button class="btn btn-buy" data-value="4">buy now</button></td>
            </tr>
            
            <tr class="form12">
                <td><span id="trans-number-12" class="col">12</span></td>
                <td></td>
                <td><span class="currenty">$</span><span id="trans-price-12" class="price">2364</span><span class="vert">/</span><span class="price-one">$</span><span class="text">per optimization</span></td>
                <td><button class="btn btn-buy" data-value="12">buy now</button></td>
            </tr>
            
        </tbody></table>

вот как устроенно, и сейчас в .price-one всюду цена 247...

[Exploding]

Sagan, ну так перенесите id из .price в .price_one, или создайте отдельно, или ещё сотней способов выбирайте ОДИН .price-one и в цикле будет менять как надо, а не для всех перезаписывать то что в текущей итерации

[Exploding]

Sagan, или у вас проблема с выбором элемента?

[sergey]

Exploding, нет проблема с тем что записываются в прайс оне одно и тоже значение для трех блоков

[sergey]

.price-one и в цикле будет менять как надо,

не совсем понял как?

[sergey]

прописал id результатам:

<table class="translate">
            <tbody><tr>
                <td colspan="2">Translations</td>
                <td>Price</td>
                <td></td>
            </tr>
            
            <tr class="form1">
                <td><span id="trans-number-1" class="col">1</span></td>
                <td></td>
                <td><span class="currenty">$</span><span id="trans-price-1" class="price">$247</span><span class="vert">/</span><span id="price-one-1">$</span><span class="text">per optimization</span></td>
                <td><button class="btn btn-buy" data-value="1">buy now</button></td>
            </tr>
            
            <tr class="form4">
                <td><span id="trans-number-4" class="col">4</span></td>
                <td></td>
                <td><span class="currenty">$</span><span id="trans-price-4" class="price">908</span><span class="vert">/</span><span id="price-one-2">$</span><span class="text">per optimization</span></td>
                <td><button class="btn btn-buy" data-value="4">buy now</button></td>
            </tr>
            
            <tr class="form12">
                <td><span id="trans-number-12" class="col">12</span></td>
                <td></td>
                <td><span class="currenty">$</span><span id="trans-price-12" class="price">2364</span><span class="vert">/</span><span id="price-one-3">$</span><span class="text">per optimization</span></td>
                <td><button class="btn btn-buy" data-value="12">buy now</button></td>
            </tr>
            
        </tbody></table>

$('.translate').each(function(){

        var amount = parseInt($('.col').html());
        var cost = parseInt($('.price').html());

        var res = amount ? cost / amount : 0;

        $("#price-one").text('$' + res.toFixed(0));
        console.log(amount, cost);

    });

как тут цикл применить?

[Exploding]

Sagan, вот так
$("#trans-price-"+id).siblings(".price-one").text('$' + res.toFixed(0));

Id - уже свой там откуда он берется поставите:)

[Exploding]

Sagan, ))) each - это и есть цикл

[Exploding]

Sagan, Оу, святые угодники, только заметил, что цикл для таблицы был а не для tr:)
Тогда немного изменить $('.translate tr').each
.....
$(this).find(".price-one").text('$' + res.toFixed(0));

И id и ему подобные идентификаторы можно удалить, если не нужны

[sergey]

спасибо!!!!

Answer 2

[Дмитрий C]

$('tr', '.translate').each(function(){
var number = $('.number', $(this)),
		price = $('.price', $(this)),
    total = $('.price-one', $(this)),
    amount = number.length ? parseInt(number.html().replace(/\D/g, '')) : 0,
		cost = price.length ? parseInt(price.html().replace(/\D/g, '')) : 0,
    res = amount ? cost / amount : 0;
	
    (total.length) && total.text('$' + res.toFixed(0));
});

Comments

[sergey]

благодарю!

Answer 3

[Максим Тимофеев]

.html() возвращает строки, а Вы далее работаете с ними как с числом не порядок. так что для начала так:

var amount = parseInt($('.number').html());
var cost = parseInt($('.price').html());

Comments

[sergey]

да спасибо, но как сделать что бы для трех разных блоков расчет был разный?