JQuery - добавить значения массива в порядке

Question

Надеюсь, я могу прояснить ситуацию, так как я очень новичок в JavaScript и JQuery.Сказав это, мне удалось приблизиться к тому месту, где я хочу быть с этим.

Помимо одной проблемы, с которой я столкнулся.Вот моя настройка HTML.

<a class="button">Press Button</a>
    <ul>
        <li class="item">
            <label>Item - </label>
            <span class="metric">3.50</span>
        </li>
        <li class="item">
            <label>Item - </label>
            <span class="metric">2.75</span>
        </li>
        <li class="item">
            <label>Item - </label>
            <span class="metric">4.27</span>
        </li>
    </ul>

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

Пример ниже

<li class="item">
<label>Item - </label>
<span class="metric">3.50</span>
<span class="imperial">7.70</span>
</li>

Проблема, с которой я столкнулся, заключается в добавлении моих вновь созданных значений,хранится в массиве под названием «имперский», обратно в мою разметку.Лучшее, чего я могу добиться - это добавление полного массива в каждый элемент списка.

Я хотел бы, чтобы каждое новое созданное имперское значение добавлялось под соответствующим ему значением метрики.Оба в своих собственных тегах span.

Я включил свой полный JS ниже -

$(document).ready(function() {

//CHANGE UNITS WHEN BUTTON IS CLICKED
$('a.button').click(function(){                 
    $('span.metric').toggle();
    $('span.imperial').toggle();
});

//CREATE VARS
//
var metric = [];
var imperial = [];

var products = [];
$("li").each(function(){ 
    products.push($(this));
});

//GET ALL METRIC UNITS IN ONE ARRAY
//
$("span.metric").each(function() {
    metric.push($(this).html());
});
console.log('metric units = ' + metric);

//MULTIPLY EACH METRIC BY 2.2 TO GET IMPERIAL. PUSH TO ARRAY
//
$.each(metric, function(key, value) {
    imperial.push((value)*2.2);
});
console.log('imperial units = ' + imperial);

//PASS IMPERIAL VALUES TO APPENDED SPAN
//
imperial = $.map(imperial, function(n, i){
    $.each(products, function(){
        $(this).append("<span class='imperial'>"+n+"</span>");
    });
    console.log(n);
});

//ROUND UP TO TWO DECIMAL PLACES
//
$("li.item span").each(function(){
    $(this).html(parseFloat($(this).html()).toFixed(2));
});

//HIDE ALL METRIC UNITS
//
$("span.imperial").addClass("hidden");

//APPEND UNITS
//
$("span.metric").append(" per Kg");
$("span.imperial").append(" per Lb");

});

Если в моем коде нет других ошибок,часть, которая должна быть связана с комментарием -

// ПРОЙДИТЕ ИМПЕРИАЛЬНЫЕ ЗНАЧЕНИЯ В ПРИЛОЖЕНИИ SPAN

Answer 1

Вы можете сделать это гораздо более простым способом, не создавая дополнительные массивы и т. Д.

$('.metric').each(function() {
    $('<span />') // create a new span element
        .addClass('imperial')
        .addClass('hidden')
        .html(this.innerHTML * 2.2).toFixed(2) + " per Lb")
        .insertAfter(this);

    $(this).html(function(i, oldHtml) {
        return parseFloat(oldHtml).toFixed(2) + " per Kg";
    });
});

Answer 2

Я не уверен, действительно ли вам нужно усложнить ситуацию.Это очень простой пример того, как сделать то, что вы хотите сделать.

http://jsfiddle.net/bAHbS/3/

$('.button').click(function(){
    $('.item').each(function(){
        var items = $(this).find('span');
        if (items.length==1){ //Check to make sure we have't already appended
            var value = parseFloat($(this).find('span').html());
            $(this).append("<span class='imperial'>"+(value * 2.2).toFixed(2)+"</span>");
        }
    });
});