Печесчет значений на js у множеста элементов имеющих одинаковые классы?

Question

[creww7]

Код работает, но не так как надо, берет последний элемент из списка, его исходные значения и на основе этих данных присваивает всем остальным.

Верстка. На странице есть множество блоков с классом gr_field внутри которых и нужно произвести пересчет значений.

.prc - стоимость в исходной валюте, пустые блоки .byn_ .rur_ .us_ .eu_ - для присваивания пересчитанных значений. Сами курсы указаны в span #rub #eur #usd внизу верстки.

<div class="gr_field">
		<span class="fl">Стоимость:</span>
		<div class="byn_"></div>
		<div class="rur_"></div>
		<div class="us_"></div>
		<div class="eu_"></div>
		<span class="prc">10</span>
</div>

<div class="gr_field">
		<span class="fl">Стоимость:</span>
		<div class="byn_"></div>
		<div class="rur_"></div>
		<div class="us_"></div>
		<div class="eu_"></div>
		<span class="prc">20</span>
</div>

<div class="gr_field">
		<span class="fl">Стоимость:</span>
		<div class="byn_"></div>
		<div class="rur_"></div>
		<div class="us_"></div>
		<div class="eu_"></div>
		<span class="prc">30</span>
</div>

<span id="rub">3.2500</span>
<span id="eur">2.4500</span>
<span id="usd">2.1500</span>

Сам js который удалось написать. Он все считает, обрезает знаки после запятой, присваивает значения по блокам. Но, берет все данные из последнего .gr_field и вставляет во все что есть....

<script>
$(document).ready(function(){

	$('.prc').each(function () { 
		var rubcur = $('#rub').text();
		var eurcur = $('#eur').text();
		var usdcur = $('#usd').text();
		
			var byncur = $(this).text();
			var recalculatedrubcur = rubcur/100;
			var recalculatedrubcur2 = byncur/recalculatedrubcur;
			var recalculatedeurcur = byncur/eurcur;
			var recalculatedusdcur = byncur/usdcur;
			
			var num_recalculatedrubcur2 = recalculatedrubcur2.toFixed(2);
			var num_recalculatedeurcur = recalculatedeurcur.toFixed(2);
			var num_recalculatedusdcur = recalculatedusdcur.toFixed(2);
			
			$('.byn_').html(byncur);
			$('.rur_').html(num_recalculatedrubcur2);
			$('.us_').html(num_recalculatedusdcur);
			$('.eu_').html(num_recalculatedeurcur);
	});
	
});
</script>

Как допилить сие костыли до состояния, когда данные действия будут проделываться отдельно внутри каждого .gr_field ? Использовать ID вместо class не вариант, размер самого js будет безумный, т.к. элементов валом, по поиску толком ничего не нашел..

Answer 1

[Виталий Киренков]

Ну так скрипт всё верно отрабатывает, вы в каждой итерации перезаписываете значение.

Если вы пляшете от . prc, то в каждой итерации вам нужно подниматься к родителю .parent('. gr_field') и в нём находить свои блоки и подставлять значения. Что-то типа

this.parent('. gr_field').find('.byn_').html(someValue)
this.parent('. gr_field').find('. rur_').html(someValue)
и тд.

ну и оптимизировать - this.parent('. gr_field') вынести в переменную.

Как-то так:
https://codepen.io/vitaliy_kirenkov/pen/daoWMP

Comments

[creww7]

Благодарен за помощь =)

Answer 2

[Владимир]

api.jquery.com/children