javascript - 克隆维度列表并在克隆上进行数学运算

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>

我的列表包含多种尺寸，以英寸(纸张尺寸)为单位。我使用一些数学方法将英寸更改为厘米。数学很简单。

我遇到的问题是将此列表克隆(我使用属性“slug”来获取纯文本尺寸>进行数学计算>克隆列表)到名为 .paste_here 的新 div。当我粘贴时，它还会编辑同一页面上单独列表的值。

如何专门对我想要克隆的项目运行数学计算？

这是我到目前为止的代码:

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('-', '.') 的实例，我的一些 slugs 显示的尺寸带有连字符而不是句点，这会破坏数学。欢迎任何指点。

Answer 1

我刚刚将附加代码替换到each()函数中，以便在为其设置新文本之前附加新的a标签。另外，为了定义一个标签位于哪个div元素中，我更改了代码$("a[slug='"+ $(this).attr('slug') + "']")。文本(高度CM + "×"+ 宽度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>