Клон Список размеров и сделать математику на клон

Question

Я пытаюсь использовать jquery для клонирования списка.Примерно так:

<div class="copy-me">
  <!-- dimensions in Inches -->
  <a href="11x14.html" class="list-group-item" slug="11x14">11x14 Inches</a>
  <a href="18x24.html" class="list-group-item" slug="18x24">18x24 Inches</a>
  ...etc
</div>
<div class="paste-here">
  <!-- generate, clone dimensions in CM -->
</div>

Мой список состоит из множества измерений, в дюймах (размеры бумаги).Я использую некоторые математические, чтобы изменить дюймы на CM.Математика проста.

У меня возникла проблема с клонированием этого списка (я использую атрибут 'slug', чтобы получить измерения простого текста> выполнить математику> клонировать список) в новый divс именем .paste_here.Когда я вставляю, он также редактирует значения отдельного списка на той же странице.

Как я специально запускаю математику ТОЛЬКО для элементов, которые я хочу клонировать?

Это мой код:

var $theClone = $(".copy-me").clone();
$theClone.find('a').each(function() {
  var selctedSizeB = $theClone.find(this).attr('slug');
  var selctedSizeArrayB = selctedSizeB.split('x');
  var heightCM = (Math.round(selctedSizeArrayB[0] / 0.39370));
  var widthCM = (Math.round(selctedSizeArrayB[1] / 0.39370));

  $("a[slug='" + $(this).attr('slug') + "']").text(heightCM + "×" + widthCM +"cm");
});     
$(".paste-here").html($theClone);

Мне также нужно включить экземпляр .replace('-', '.'), некоторые из моих слагов показывают измерения с дефисом, а не с точкой, что нарушает математику.Любые указатели приветствуются.

Answer 1

Я просто заменил код добавления в функцию each (), чтобы добавлять новые теги перед установкой нового текста.Кроме того, чтобы определить теги, в которых находится элемент div, я изменил код $("a[slug='" + $(this).attr('slug') + "']").text(heightCM + "×" + widthCM +"cm"); на этот: $(this).parent().find("a[slug='" + $(this).attr('slug') + "']").text(heightCM + "×" + widthCM +"cm"); окончательный код:

$(document).ready(function() {
    $(document).on("click", "#btn", function(){
      $theClone = $(".copy-me").clone().removeClass('copy-me');

      $theClone.find('a').each(function() {
        $(".paste-here").append($(this).parent());
        var selctedSizeB = $(this).attr('slug');
        var selctedSizeArrayB = selctedSizeB.split('x');
        var heightCM = (Math.round(selctedSizeArrayB[0] / 0.39370));
        var widthCM = (Math.round(selctedSizeArrayB[1] / 0.39370));

        $(this).parent().find("a[slug='" + $(this).attr('slug') + "']").text(heightCM + "×" + widthCM +"cm");
      });
    });

	});

<div class="copy-me">
  <!-- dimensions in Inches -->
  <a href="11x14.html" class="list-group-item" slug="11x14">11x14 Inches</a>

  <a href="18x24.html" class="list-group-item" slug="18x24">18x24 Inches</a>
</div>
<div class="paste-here">
  <!-- generate, clone dimensions in CM -->
</div>
<button id="btn">clone</button>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>