JQuery - Append array values in order

Hopefully I can make myself clear as I am very much a JavaScript and JQuery novice. Having said that, I have managed to get myself pretty near to where I want to be with this.

Apart from one problem I am faced with. Here's my HTML set-up.

<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>

Now what I am trying to achieve upon the press on a button, is to pass all the metric values found in each span into an array, multiply them by 2.2 to get a set of imperial values, and finally append those newly created values into a span below each metric span.

Example below

开发者_StackOverflow社区

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

The problem I have is appending my newly created values, stored in an array called 'imperial', back into my markup. The best I can achieve is the appending of the full array, into each list item.

What I would like to happen is each newly created imperial value, be appended beneath it's corresponding metric value. Both in their own span tags.

I have included my full JS below -

$(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");

});

Unless there are any other errors in my code, the part to be concerned with is from the comment -

//PASS IMPERIAL VALUES TO APPENDED SPAN

---

You could do this in a much more simple way without building extra arrays, etc.

$('.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";
    });
});

---

I'm not sure if you really need to make it this complicated. This is a very basic example of how to do what you want to accomplish.

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>");
        }
    });
});