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

});

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

// PASS имперского ЗНАЧЕНИЯ ДЛЯ прилагаемой 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>"); 
     } 
    }); 
});